'use client';

import { useLocale } from '@/lib/i18n/locale-context';
import { cn } from '@/lib/utils';

export function LanguageToggle({ compact = false }: { compact?: boolean }) {
  const { locale, setLocale } = useLocale();

  return (
    <div
      className={cn(
        'relative flex items-center rounded-full border border-white/10 bg-white/[0.02] p-0.5',
        compact ? 'text-[0.65rem]' : 'text-xs',
      )}
      role="group"
      aria-label="Language"
    >
      <button
        type="button"
        onClick={() => setLocale('fa')}
        className={cn(
          'relative z-10 rounded-full px-3 py-1 font-mono uppercase tracking-widest transition-colors',
          locale === 'fa' ? 'text-base-900' : 'text-slate-400 hover:text-slate-200',
        )}
        aria-pressed={locale === 'fa'}
      >
        FA
      </button>
      <button
        type="button"
        onClick={() => setLocale('en')}
        className={cn(
          'relative z-10 rounded-full px-3 py-1 font-mono uppercase tracking-widest transition-colors',
          locale === 'en' ? 'text-base-900' : 'text-slate-400 hover:text-slate-200',
        )}
        aria-pressed={locale === 'en'}
      >
        EN
      </button>
      <span
        aria-hidden
        className={cn(
          'absolute top-0.5 bottom-0.5 w-[calc(50%-2px)] rounded-full bg-brand-gradient transition-[inset-inline-start] duration-300 ease-out',
        )}
        style={{
          insetInlineStart: locale === 'fa' ? '2px' : 'calc(50% + 0px)',
        }}
      />
    </div>
  );
}