"use client";

import { useLocale } from 'next-intl';
import { useRouter, usePathname } from '@/routing';
import { useTransition } from 'react';

export default function LanguageSwitcher({ showSolid }: { showSolid: boolean }) {
  const [isPending, startTransition] = useTransition();
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();

  function onSelectChange(nextLocale: string) {
    startTransition(() => {
      router.replace(pathname, { locale: nextLocale });
    });
  }

  return (
    <select
      defaultValue={locale}
      disabled={isPending}
      onChange={(e) => onSelectChange(e.target.value)}
      className={`text-sm px-3 py-1.5 rounded-full border bg-transparent font-medium transition cursor-pointer appearance-none ${
        showSolid
          ? "border-gray-200 text-heading focus:border-merah-ranata"
          : "border-white/30 text-white focus:border-white"
      }`}
    >
      <option value="id" className="text-heading">🇮🇩 ID</option>
      <option value="en" className="text-heading">🇬🇧 EN</option>
    </select>
  );
}