"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { useLanguages, useLocale } from "@/components/i18n/LocaleProvider";

export default function LanguageSwitcher({
  className = "",
  variant = "dark",
}: {
  className?: string;
  variant?: "dark" | "light";
}) {
  const locale = useLocale();
  const languages = useLanguages();
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  async function change(next: string) {
    if (next === locale || busy) return;
    setBusy(true);
    await fetch("/api/locale", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ locale: next }),
    });
    router.refresh();
    setBusy(false);
  }

  // Bei nur einer aktiven Sprache gibt es nichts umzuschalten.
  if (languages.length <= 1) return null;

  const activeCls =
    variant === "dark" ? "bg-white/25 text-white" : "bg-gray-200 text-gray-900";
  const inactiveCls =
    variant === "dark"
      ? "text-white/60 hover:text-white hover:bg-white/10"
      : "text-gray-400 hover:text-gray-700 hover:bg-gray-100";

  return (
    <div className={`flex gap-1 text-xs ${className}`} aria-label="Sprache">
      {languages.map((l) => (
        <button
          key={l.code}
          type="button"
          onClick={() => change(l.code)}
          disabled={busy}
          aria-current={l.code === locale}
          title={l.label}
          className={`rounded px-1.5 py-0.5 uppercase font-semibold transition-colors ${
            l.code === locale ? activeCls : inactiveCls
          }`}
        >
          {l.code}
        </button>
      ))}
    </div>
  );
}