"use client";

import { useTheme } from "@/contexts/ThemeContext";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Sun, Moon, Accessibility } from "lucide-react";

const themes = [
  { value: "light", label: "일반 모드", icon: Sun, color: "text-orange-500" },
  { value: "dark", label: "다크 모드", icon: Moon, color: "text-blue-400" },
  { value: "senior", label: "시니어 모드", icon: Accessibility, color: "text-green-500" },
];

export function ThemeSelect() {
  const { theme, setTheme } = useTheme();

  const currentTheme = themes.find((t) => t.value === theme);
  const CurrentIcon = currentTheme?.icon || Sun;

  return (
    <Select value={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "senior")}>
      <SelectTrigger className="w-[160px] rounded-xl border-border/50 bg-background/50 backdrop-blur">
        <div className="flex items-center gap-2">
          <CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
          <SelectValue>
            <span className="text-sm">{currentTheme?.label}</span>
          </SelectValue>
        </div>
      </SelectTrigger>
      <SelectContent>
        {themes.map((themeOption) => {
          const Icon = themeOption.icon;
          return (
            <SelectItem key={themeOption.value} value={themeOption.value}>
              <div className="flex items-center gap-2">
                <Icon className={`w-4 h-4 ${themeOption.color}`} />
                <span>{themeOption.label}</span>
              </div>
            </SelectItem>
          );
        })}
      </SelectContent>
    </Select>
  );
}