import {
  Select,
  SelectItem,
  SelectValue,
  SelectContent,
  SelectTrigger,
} from "@/components/ui/select";
import { SUPPORTED_LANGUAGES } from "@/constants/languages";
import { useCodeEditorStore } from "@/store/useCodeEditorStore";

export default function LanguageSelector() {
  const { language, setLanguage } = useCodeEditorStore();

  return (
    <Select value={language} onValueChange={setLanguage}>
      <SelectTrigger className="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80 w-36">
        <SelectValue placeholder="Select Language" />
      </SelectTrigger>
      <SelectContent className="[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
        {SUPPORTED_LANGUAGES.map((lang) => (
          <SelectItem key={lang.key} value={lang.value}>
            <lang.icon size={16} aria-hidden="true" />
            <span className="truncate">{lang.label}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}