'use client';

import { cn } from '@/lib/utils';
import type { RegisterLang } from '@/lib/registerLang';

export function RegisterLangToggle({
  value,
  onChange,
  className,
  variant = 'dark',
}: {
  value: RegisterLang;
  onChange: (lang: RegisterLang) => void;
  className?: string;
  /** dark = on dark heroes; light = in the site header */
  variant?: 'dark' | 'light';
}) {
  const isLight = variant === 'light';

  return (
    <div
      className={cn(
        'inline-flex items-center rounded-lg p-0.5 text-xs font-semibold',
        isLight
          ? 'border border-border bg-slate-100'
          : 'border border-white/20 bg-white/10',
        className
      )}
      role="group"
      aria-label="Language"
    >
      <button
        type="button"
        onClick={() => onChange('en')}
        className={cn(
          'rounded-md px-2.5 py-1.5 transition-colors',
          value === 'en'
            ? isLight
              ? 'bg-white text-slate-900 shadow-sm'
              : 'bg-white text-slate-900'
            : isLight
              ? 'text-muted hover:text-slate-900'
              : 'text-slate-300 hover:text-white'
        )}
      >
        EN
      </button>
      <button
        type="button"
        onClick={() => onChange('tl')}
        className={cn(
          'rounded-md px-2.5 py-1.5 transition-colors',
          value === 'tl'
            ? isLight
              ? 'bg-white text-slate-900 shadow-sm'
              : 'bg-white text-slate-900'
            : isLight
              ? 'text-muted hover:text-slate-900'
              : 'text-slate-300 hover:text-white'
        )}
      >
        TL
      </button>
    </div>
  );
}