'use client';

import { Languages } from 'lucide-react';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { AppLocale } from '@/lib/i18n/core';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

const OPTIONS = [
  { value: 'zh-CN', label: '中文', shortLabel: '中' },
  { value: 'en-US', label: 'English', shortLabel: 'EN' },
  { value: 'zh-Hant', label: '繁體中文', shortLabel: '繁' },
] as const;

export function LanguageSwitcher({ className }: { className?: string }) {
  const { locale, setLocale } = useAppI18n();
  const selectedOption = OPTIONS.find((option) => option.value === locale) ?? OPTIONS[0];

  return (
    <Select value={locale} onValueChange={(value) => setLocale(value as AppLocale)}>
      <SelectTrigger
        className={cn('h-11 w-[92px] gap-1.5 bg-muted/30 px-2 sm:w-[138px] sm:gap-2 sm:px-3', className)}
        aria-label={pickAppText(locale, '选择语言', 'Select language')}
      >
        <Languages className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
        <SelectValue aria-label={selectedOption.label}>
          <span className="min-w-0 flex-1 truncate text-left">
            <span className="sm:hidden">{selectedOption.shortLabel}</span>
            <span className="hidden sm:inline">{selectedOption.label}</span>
          </span>
        </SelectValue>
      </SelectTrigger>
      <SelectContent align="end">
        {OPTIONS.map((option) => (
          <SelectItem key={option.value} value={option.value}>
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}