import {
  Select,
  SelectItem,
  SelectValue,
  SelectContent,
  SelectTrigger,
} from "@/components/ui/select";
import { Palette } from "lucide-react";
import { SUPPORTED_THEMES } from "@/constants/editor/themes";
import { useCodeEditorStore } from "@/store/useCodeEditorStore";

export default function ThemeSelector() {
  const { theme, setTheme } = useCodeEditorStore();

  return (
    <Select value={theme} onValueChange={setTheme}>
      <SelectTrigger className="relative ps-9 w-40">
        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
          <Palette size={16} strokeWidth={2} aria-hidden="true" />
        </div>
        <SelectValue placeholder="Select Theme" />
      </SelectTrigger>
      <SelectContent>
        {SUPPORTED_THEMES.map((theme) => (
          <SelectItem key={theme.key} value={theme.value}>
            <span className="truncate">{theme.label}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
