import React, { Component } from "react";
import PythonLogo from "../media/logos/languages/python-logo.png"
import JavaLogo from "../media/logos/languages/java-logo.png"
import CplusLogo from "../media/logos/languages/c++.png"
import JavaScriptLogo from "../media/logos/languages/JavaScript.webp"
import '../css/devtools.css'
import Languages from "../data/programmingLaguages.json"

const logos = {
  "Python":PythonLogo,
  "Java":JavaLogo,
  "C++":CplusLogo,
  "JavaScript": JavaScriptLogo
}


class DevToolsComponent extends Component {
  
render(){
    return (
        <div>
          {/* <h2>Programming Languages</h2> */}
          <div className="dev-tools-container">
            {Languages.map(({name}) => (
              <div  className="dev-tool">
                <img src={logos[name]} alt={name} className="dev-tool-logo" />
                <h3>{name}</h3>
              </div>
            ))}
          </div>
        </div>
      );
}
  
};

export default DevToolsComponent;