'use client';

import { persistLocale } from '@/lib/localization/client';
import {
  localeSwitchUrl,
  locales,
  routeIdFromPathname,
  type Locale,
} from '@/lib/localization/config';
import { usePathname } from 'next/navigation';
import styles from './Controls.module.css';

interface LocaleSelectorProps {
  currentLocale: Locale;
  label: string;
  localeNames: Record<Locale, string>;
  compact?: boolean;
}

export function LocaleSelector({
  currentLocale,
  label,
  localeNames,
  compact = false,
}: LocaleSelectorProps) {
  const pathname = usePathname();
  const routeId = routeIdFromPathname(pathname) ?? 'home';

  return (
    <label className={styles.field}>
      <span className={compact ? styles.compactLabel : styles.label}>{label}</span>
      <select
        className={styles.select}
        aria-label={label}
        value={currentLocale}
        onChange={(event) => {
          const targetLocale = event.target.value as Locale;
          persistLocale(targetLocale);
          window.location.assign(
            localeSwitchUrl(new URL(window.location.href), targetLocale, routeId),
          );
        }}
      >
        {locales.map((locale) => (
          <option key={locale} value={locale}>
            {localeNames[locale]}
          </option>
        ))}
      </select>
    </label>
  );
}