"use client";

import { usePathname, useRouter } from "@/i18n/navigation";
import { Button } from "@/components/ui/button";
import { LuLanguages } from "react-icons/lu";
import { useLocale } from "use-intl";

interface LanguageSwitcherProps {
  onClose?: () => void;
}

export default function LanguageSwitcher({ onClose }: LanguageSwitcherProps) {
  const locale = useLocale();
  const pathname = usePathname();
  const router = useRouter();

  const toggleLanguage = () => {
    const newLocale = locale === "en" ? "ar" : "en";
    router.push(pathname, { locale: newLocale });
    onClose?.();
  };

  return (
    <Button
      size="icon"
      className="w-9 h-9 font-normal flex items-center gap-2 rounded-[0px] bg-primary-anti_flash_white-main text-vendor-primary hover:bg-white hover:text-vendor-primary"
      onClick={toggleLanguage}
      title={locale === "en" ? "Switch to Arabic" : "Switch to English"}
    >
      <LuLanguages className="size-5" />
    </Button>
  );
}