'use client';

import { Globe } from 'lucide-react';
import { LOCALES, Locale } from '@/i18n/types';
import { usesArabicScript } from '@/i18n';
import { useLocaleStore } from '@/store/locale';
import { useTranslation } from '@/hooks/useTranslation';
import { cn } from '@/lib/utils';

export default function LanguageBanner() {
  const { locale, setLocale } = useLocaleStore();
  const { t } = useTranslation();

  return (
    <div
      className="border-b border-brand-800 bg-brand-950 text-white"
      role="navigation"
      aria-label={t('nav.language')}
    >
      <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-2 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
        <div className="flex items-center gap-2 text-xs font-medium text-brand-200">
          <Globe className="h-3.5 w-3.5 text-gold-400" aria-hidden />
          <span>{t('languageBanner.choose')}</span>
        </div>

        <div
          className="flex w-full max-w-full items-center justify-start gap-1 overflow-x-auto rounded-full bg-brand-900 p-1 ring-1 ring-brand-800 sm:max-w-none sm:justify-center"
          role="group"
          aria-label={t('nav.language')}
        >
          {LOCALES.map((lang) => {
            const active = locale === lang.code;
            const scriptFont =
              lang.code === 'ur'
                ? 'font-[family-name:var(--font-urdu)]'
                : lang.code === 'ar' || lang.code === 'fa'
                  ? 'font-[family-name:var(--font-arabic)]'
                  : '';
            return (
              <button
                key={lang.code}
                type="button"
                onClick={() => setLocale(lang.code as Locale)}
                aria-pressed={active}
                aria-label={`${lang.label} (${lang.nativeLabel})`}
                className={cn(
                  'flex shrink-0 items-center justify-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition-all sm:px-4 sm:py-2 sm:text-sm',
                  active
                    ? 'bg-gold-500 text-brand-950 shadow-gold'
                    : 'text-brand-200 hover:bg-brand-800 hover:text-white'
                )}
              >
                <span
                  className={usesArabicScript(lang.code as Locale) ? scriptFont : ''}
                >
                  {lang.nativeLabel}
                </span>
                <span
                  className={cn(
                    'hidden text-[10px] font-normal uppercase tracking-wide sm:inline',
                    active ? 'text-brand-900/70' : 'text-brand-400'
                  )}
                >
                  {lang.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}