'use client';

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

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

  const [currentLocale, setCurrentLocale] = useState(locale);

  function switchLocale(next: string) {
    setCurrentLocale(next);
    router.replace(pathname, { locale: next });
  }

  return (
    <div className="flex items-center gap-2 w-full py-2 hover:opacity-80">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={`/flags/${currentLocale}.svg`}
        alt={currentLocale}
        className="w-5 h-5 rounded-sm object-cover"
      />

      <select
        value={currentLocale}
        onChange={(e) => switchLocale(e.target.value)}
        className="bg-transparent text-current cursor-pointer outline-none w-full"
      >
        {locales.map(({ code, label }) => (
          <option value={code} key={code}>
            {label}
          </option>
        ))}
      </select>
    </div>
  );
}