"use client";

import { useRouter } from "next/navigation";
import { LOCALES, LOCALE_LABELS, type Locale } from "@/lib/i18n/locales";
import { setLocaleCookie } from "@/lib/i18n/set-locale-cookie";

export function LanguageSwitcher({ current }: { current: Locale }) {
    const router = useRouter();

    async function switchTo(locale: Locale) {
        if (locale === current) {
            return;
        }
        await setLocaleCookie(locale);
        router.refresh();
    }

    return (
        <div
            role="group"
            aria-label="language"
            className="flex items-center gap-1 rounded-full border border-white/10 bg-white/5 p-1"
        >
            {LOCALES.map((locale) => (
                <button
                    key={locale}
                    type="button"
                    onClick={() => switchTo(locale)}
                    aria-pressed={locale === current}
                    className={`rounded-full px-2.5 py-1 font-mono text-xs transition-colors ${
                        locale === current
                            ? "bg-blurple text-white"
                            : "text-zinc-400 hover:text-white"
                    }`}
                >
                    {LOCALE_LABELS[locale]}
                </button>
            ))}
        </div>
    );
}