'use client';

import { useLanguage } from '@/lib/language-context';
import { languages, Language } from '@/lib/translations';
import { Globe } from 'lucide-react';

export const LANGUAGE_BANNER_HEIGHT = 48;
export const NAVBAR_HEIGHT = 68;
export const HEADER_TOTAL_HEIGHT = LANGUAGE_BANNER_HEIGHT + NAVBAR_HEIGHT;

export default function LanguageSwitcher() {
  const { language, setLanguage } = useLanguage();

  const handleSelect = (lang: Language) => {
    setLanguage(lang);
  };

  return (
    <div
      className="lang-banner w-full border-b border-[#c99a2e]/25 bg-gradient-to-r from-[#0a4a3d] via-[#0f5a4a] to-[#0a4a3d]"
      style={{ height: LANGUAGE_BANNER_HEIGHT }}
      role="navigation"
      aria-label="Language selection"
    >
      <div className="mx-auto flex h-full max-w-7xl items-center gap-2 px-3 sm:px-6">
        <div className="hidden shrink-0 items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-[#d4a73d]/90 sm:flex">
          <Globe className="h-3.5 w-3.5" />
          <span>Language</span>
        </div>

        <div className="flex flex-1 items-center justify-center gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:gap-1.5">
          {languages.map((lang) => {
            const isActive = language === lang.code;

            return (
              <button
                key={lang.code}
                type="button"
                onClick={() => handleSelect(lang.code)}
                aria-pressed={isActive}
                aria-label={`${lang.name} (${lang.native})`}
                className={`flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all sm:gap-1.5 sm:px-3 sm:py-1.5 sm:text-xs ${
                  isActive
                    ? 'bg-gradient-to-r from-[#c99a2e] to-[#e8c56a] text-[#1a1206] shadow-lg shadow-[#c99a2e]/35 ring-1 ring-[#f4d47f]/50'
                    : 'text-white/80 hover:bg-white/12 hover:text-white'
                }`}
              >
                <span className="text-sm sm:text-base" aria-hidden="true">
                  {lang.flag}
                </span>
                <span className="whitespace-nowrap">{lang.native}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}