<div id="root"></div>

/* Not Required - Just makes it more fun*/

body {
  font-family: Arial, sans-serif;
  background-color: #2E2E2E;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#dropdown {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #FFFFFF
}

div {
  text-align: center;
}

p {
  margin-top: 20px;
  font-size: 18px;
  color: #FFCB6A;
}

import React, { useState, ChangeEvent } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";


const languages = ['en', 'fr', 'es', 'ru', 'ja', 'zh']

const getLanguage = (language: string): string => {
  return new Intl.DisplayNames([language], { type: 'language' }).of(language);
}

const LanguageDropdown = () => {
  const [selectedValue, setSelectedValue] = useState<string>(languages[0]);
  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <label htmlFor="dropdown">Choose Language</label>
      <select id="dropdown" value={selectedValue} onChange={handleChange}>
        {languages.map((language) => (
            <option key={language} value={language}>
              {getLanguage(language)}
            </option>
          ))}
      </select>
      {selectedValue && <p>You selected: {selectedValue}</p>}
    </div>
  );
};

ReactDOM.render(<LanguageDropdown />, document.getElementById('root'));