"use client";

import { useLocale, useTranslations } from "next-intl";
import { Link, usePathname } from "@/i18n/navigation";
import type { AppLocale } from "@/i18n/routing";

const localeLabels: Record<AppLocale, string> = {
  en: "EN",
  el: "EL",
};

export function LocaleSwitcher() {
  const locale = useLocale() as AppLocale;
  const pathname = usePathname();
  const t = useTranslations("Navigation");

  return (
    <div
      aria-label={t("language")}
      className="inline-flex items-center rounded-lg border bg-background/70 p-0.5"
    >
      {(["en", "el"] as AppLocale[]).map((targetLocale) => (
        <Link
          key={targetLocale}
          href={pathname}
          locale={targetLocale}
          aria-current={locale === targetLocale ? "true" : undefined}
          className="rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground aria-current:bg-primary aria-current:text-primary-foreground"
        >
          {localeLabels[targetLocale]}
        </Link>
      ))}
    </div>
  );
}