'use client';

import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { setLocaleAction } from '../app/actions';
import type { Locale } from '../lib/i18n';

type Props = {
  currentLocale: Locale;
  label: string;
  englishLabel: string;
  indonesianLabel: string;
  submitLabel: string;
  variant?: 'default' | 'compact';
};

export function LanguageSwitcher({
  currentLocale,
  label,
  englishLabel,
  indonesianLabel,
  submitLabel,
  variant = 'default',
}: Props) {
  const pathname = usePathname();
  const [locale, setLocale] = useState<Locale>(currentLocale);

  if (variant === 'compact') {
    return (
      <form action={setLocaleAction} className="language-switcher language-switcher-compact">
        <input type="hidden" name="redirectPath" value={pathname} />
        <span className="sr-only">{label}</span>
        <button
          type="submit"
          name="locale"
          value="en"
          className={currentLocale === 'en' ? 'is-active' : ''}
        >
          EN
        </button>
        <button
          type="submit"
          name="locale"
          value="id"
          className={currentLocale === 'id' ? 'is-active' : ''}
        >
          ID
        </button>
      </form>
    );
  }

  return (
    <form action={setLocaleAction} className="language-switcher">
      <input type="hidden" name="redirectPath" value={pathname} />
      <label>
        <span>{label}</span>
        <select name="locale" value={locale} onChange={(event) => setLocale(event.target.value as Locale)}>
          <option value="id">{indonesianLabel}</option>
          <option value="en">{englishLabel}</option>
        </select>
      </label>
      <button type="submit">{submitLabel}</button>
    </form>
  );
}