'use client'

import { useLocale } from 'next-intl'
import { useRouter, usePathname } from '@/navigation'
import { routing } from '@/i18n/routing'

const FLAG_LABELS: Record<string, string> = {
  en: 'English',
  fr: 'Français',
  es: 'Español',
  it: 'Italiano',
}

export function LanguageSwitcher() {
  const locale = useLocale()
  const router = useRouter()
  const pathname = usePathname()

  return (
    <div className="flex items-center gap-1">
      {routing.locales.map((loc) => (
        <button
          key={loc}
          onClick={() => router.replace(pathname, { locale: loc })}
          aria-label={FLAG_LABELS[loc]}
          className={[
            'rounded transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500',
            loc === locale
              ? 'opacity-100 ring-2 ring-violet-500 ring-offset-1 ring-offset-white dark:ring-offset-slate-950'
              : 'opacity-40 hover:opacity-70',
          ].join(' ')}
        >
          <img
            src={`/flags/${loc}.svg`}
            alt={FLAG_LABELS[loc]}
            width={28}
            height={20}
            className="rounded-sm block"
          />
        </button>
      ))}
    </div>
  )
}
