'use client';

import { useLanguage } from '@/hooks/use-language';
import { Globe } from 'lucide-react';
import { useState, useRef, useEffect } from 'react';

type Lang = 'ar' | 'en' | 'fr';

const labels: Record<Lang, string> = {
  ar: 'العربية',
  en: 'English',
  fr: 'Français',
};

export function LanguageSwitcher() {
  const { lang, setLang } = useLanguage();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen(!open)}
        className="h-8 px-2 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 flex items-center gap-1.5 text-xs text-zinc-400 transition-colors"
      >
        <Globe className="h-3.5 w-3.5" />
        <span>{labels[lang]}</span>
      </button>
      {open && (
        <div className="absolute right-0 top-full mt-1 w-32 rounded-xl border border-zinc-800 bg-zinc-900 overflow-hidden shadow-xl z-50">
          {(Object.keys(labels) as Lang[]).map((l) => (
            <button
              key={l}
              onClick={() => { setLang(l); setOpen(false); }}
              className={`w-full text-start px-3 py-2 text-xs hover:bg-zinc-800 transition-colors ${
                l === lang ? 'text-white font-medium' : 'text-zinc-400'
              }`}
            >
              {labels[l]}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}