"use client";

import { useRouter, usePathname } from 'next/navigation';
import { i18n, Locale } from '@/lib/i18nConfig';
import { useState, useEffect } from 'react';

interface LanguageSwitcherProps {
  currentLocale: Locale;
}

export function LanguageSwitcher({ currentLocale }: LanguageSwitcherProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null; // Or a loading spinner
  }

  const onSelectChange = (newLocale: Locale) => {
    // Replace the current locale in the pathname with the new one
    const newPath = `/${newLocale}${pathname.substring(3)}`; // Assuming /en, /fr, /es are 3 chars
    router.push(newPath);

    // Set cookie for middleware to remember preferred locale
    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000;`;
  };

  return (
    <select
      onChange={(e) => onSelectChange(e.target.value as Locale)}
      value={currentLocale}
      className="w-[100px] bg-background-accent text-foreground p-2 rounded-md border border-gray-300 dark:border-gray-700"
    >
      {i18n.locales.map((locale) => (
        <option key={locale} value={locale}>
          {locale.toUpperCase()}
        </option>
      ))}
    </select>
  );
}
