'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { switchLocalePath, type Locale } from '@ai-radar/shared';

/**
 * Switches language while staying on the same page.
 *
 * A real <a>, not a JavaScript handler, so crawlers follow it and
 * discover the other language — which is what makes hreflang work.
 * `usePathname` is the only reason this is a client component; the href
 * it produces is a plain link.
 *
 * The label is always the OTHER language's name written in that
 * language, so it is legible to the reader who wants it.
 */
export function LanguageSwitch({ locale, label }: { locale: Locale; label: string }) {
  const pathname = usePathname();
  const target: Locale = locale === 'ar' ? 'en' : 'ar';
  const href = switchLocalePath(pathname || `/${locale}`, target);

  return (
    <Link href={href} className="lang-switch" hrefLang={target} lang={target}>
      {label}
    </Link>
  );
}