'use client';

import React from 'react';
import { Language, SUPPORTED_LANGUAGES } from '@/types';
import { FaGlobe } from 'react-icons/fa';

interface LanguageSelectorProps {
  currentLanguage: Language;
  onLanguageChange: (language: Language) => void;
}

export function LanguageSelector({
  currentLanguage,
  onLanguageChange,
}: LanguageSelectorProps) {
  return (
    <div className="relative inline-block">
      <select
        value={currentLanguage.code}
        onChange={(e) => {
          const language = SUPPORTED_LANGUAGES.find(
            (lang) => lang.code === e.target.value
          );
          if (language) {
            onLanguageChange(language);
          }
        }}
        className="appearance-none pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        {SUPPORTED_LANGUAGES.map((language) => (
          <option key={language.code} value={language.code}>
            {language.nativeName} ({language.name})
          </option>
        ))}
      </select>
      <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <FaGlobe className="text-gray-500" />
      </div>
    </div>
  );
}