"use client";

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useMultiLang } from "@/hooks/useMultiLang";

interface LanguageSelectorProps {
  className?: string;
}

export function LanguageSelector({ className }: LanguageSelectorProps) {
  const { userLang, changeLang } = useMultiLang();

  const languages = [
    { code: "KR", name: "한국어", flag: "🇰🇷" },
    { code: "US", name: "English", flag: "🇺🇸" },
    { code: "JP", name: "日本語", flag: "🇯🇵" },
    { code: "CN", name: "中文", flag: "🇨🇳" },
  ];

  const handleLanguageChange = (newLang: string) => {
    console.log("🎯 LanguageSelector 언어 변경:", newLang);
    changeLang(newLang);
  };

  return (
    <Select value={userLang || ""} onValueChange={handleLanguageChange}>
      <SelectTrigger className={`${className}`}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {languages.map((lang) => (
          <SelectItem key={lang.code} value={lang.code}>
            <span className="flex items-center space-x-2">
              <span>{lang.flag}</span>
              <span>{lang.name}</span>
            </span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}