"use client";

import { useRouter, usePathname } from "@/i18n/navigation";
import FlagIcon from "@/components/ui/FlagIcon";

interface ComingSoonLocaleToggleProps {
  locale: "en" | "es";
  /** Current query string, read on the server so this stays SSR-safe. */
  queryString: string;
}

export default function ComingSoonLocaleToggle({ locale, queryString }: ComingSoonLocaleToggleProps) {
  const router = useRouter();
  const pathname = usePathname();

  const toggleLanguage = () => {
    const newLocale = locale === "en" ? "es" : "en";
    const pathnameWithQuery = queryString ? `${pathname}?${queryString}` : pathname;
    router.replace(pathnameWithQuery, { locale: newLocale });
  };

  return (
    <button
      onClick={toggleLanguage}
      className="flex items-center gap-1.5 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-white/60 rounded-lg transition cursor-pointer"
    >
      <FlagIcon locale={locale} />
      <span className="font-medium">{locale.toUpperCase()}</span>
    </button>
  );
}