"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) => {
    changeLang(newLang);
    // 언어 변경 시 메뉴 컨텍스트가 자동으로 새로고침됨
    console.log("언어 변경됨:", 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>
  );
}