"use client";
import React from 'react';
import { useLocale } from '@/lib/hooks/useLocale';
import { SupportedLocale } from '@/lib/slice/locale';

interface LanguageSwitcherProps {
  className?: string;
}

export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ className = '' }) => {
  const { currentLocale, changeLanguage } = useLocale();

  const languages = [
    { code: 'id' as SupportedLocale, name: 'Bahasa Indonesia', flag: '🇮🇩' },
    { code: 'cn' as SupportedLocale, name: '中文', flag: '🇨🇳' },
  ];

  return (
    <div className={`relative inline-block ${className}`}>
      <select
        value={currentLocale}
        onChange={(e) => changeLanguage(e.target.value as SupportedLocale)}
        className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      >
        {languages.map((lang) => (
          <option key={lang.code} value={lang.code}>
            {lang.flag} {lang.name}
          </option>
        ))}
      </select>
      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
        </svg>
      </div>
    </div>
  );
};