'use client';

import { Languages } from 'lucide-react';

import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

const OPTIONS = [
  { value: 'zh-CN', label: 'ZH' },
  { value: 'en-US', label: 'EN' },
] as const;

export function LanguageSwitcher({ className }: { className?: string }) {
  const { locale, setLocale } = useAppI18n();

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1 rounded-md border border-border bg-muted/30 p-1',
        className
      )}
    >
      <Languages className="h-3.5 w-3.5 text-muted-foreground" />
      {OPTIONS.map((option) => (
        <button
          key={option.value}
          type="button"
          onClick={() => setLocale(option.value)}
          className={cn(
            'rounded px-2 py-1 text-xs font-medium transition-colors',
            locale === option.value
              ? 'bg-background text-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}