"use client";

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

interface LanguageSwitcherProps {
  variant?: "button" | "link";
  onClose?: () => void;
}

export default function LanguageSwitcher({
  variant = "button",
  onClose,
}: LanguageSwitcherProps) {
  const { locale } = useLocaleDirection();
  const pathname = usePathname();
  const router = useRouter();

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

  if (variant === "link") {
    return (
      <button
        onClick={toggleLanguage}
        className="text-white text-[14px] hover:opacity-80 transition-opacity flex justify-items-start"
      >
        {locale === "en" ? "عربي" : "English"}
      </button>
    );
  }

  return (
    <Button
      variant="radial-gradient-white"
      size="icon"
      onClick={toggleLanguage}
      title={locale === "en" ? "Switch to Arabic" : "Switch to English"}
    >
      <LuLanguages className="size-5" />
    </Button>
  );
}