"use client";

import { Globe2 } from "lucide-react";
import { languageNames, useTenant } from "@/components/tenant-provider";

export default function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
  const { tenant, language, setLanguage, t } = useTenant();
  if (tenant.supportedLanguages.length < 2) return null;
  return (
    <label className="flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2 text-slate-600" title={t("language")}>
      <Globe2 size={compact ? 14 : 16} className="text-[var(--brand)]" />
      <select
        value={language}
        onChange={(event) => setLanguage(event.target.value)}
        className={`${compact ? "h-8 text-[10px]" : "h-9 text-xs"} max-w-24 bg-transparent font-bold outline-none`}
        aria-label={t("language")}
      >
        {tenant.supportedLanguages.map((code) => <option key={code} value={code}>{languageNames[code] || code.toUpperCase()}</option>)}
      </select>
    </label>
  );
}