import { useTranslations } from 'next-intl';
import type { LanguageAlternative } from '#web-runtime/types';
import { localeHref } from '../helpers';

export default function LanguageAlternatives({
  alternatives
}: {
  alternatives: LanguageAlternative[];
}) {
  const t = useTranslations('Components.Navigation');

  if (alternatives.length < 2) {
    return null;
  }

  return (
    <nav
      className="flex gap-2.5 font-mono text-[0.7rem] font-bold text-[#5d675f]"
      aria-label={t('languages')}
    >
      {alternatives.map((alternative) => (
        <a
          key={`${alternative.locale}-${alternative.path}`}
          href={localeHref(alternative)}
          hrefLang={alternative.locale}
          className="hover:text-[#172019] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
        >
          {alternative.locale.toUpperCase()}
        </a>
      ))}
    </nav>
  );
}