let languages = {
  html: "HTML",
  css: "CSS",
  javascript: "JavaScript",
  java: "Java",
  python: "Python",
  xml: "XML",
  ruby: "Ruby",
  sass: "Sass",
  markdown: "Markdown",
  mysql: "MySql",
  json: "JSON",
  handlebars: "Handlebars",
  golang: "Golang",
  csharp: "C Sharp",
  elixir: "Elixir",
  typescript: "TypeScript",
};

const SelectLang = ({ list = languages, onChange, value }) => {
  return (
    <>
      <select
        style={{ marginBottom: "10px", marginLeft: "15px" }}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="select"
      >
        {Object.entries(list).map(([value, text]) => (
          <option value={value} key={value}>
            {text}
          </option>
        ))}
      </select>
    </>
  );
};

export default SelectLang;