"use client";

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

interface LanguageSwitcherProps {
  variant?: "default" | "ghost" | "outline";
  size?: "default" | "icon" | "link";
  text: string;
  onClose?: () => void;
}

export default function LanguageSwitcher({
  variant = "outline",
  size = "default",
  text,
  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?.();
  };

  return (
    <Button variant={variant} size={size} onClick={toggleLanguage} title={text}>
      {text}
    </Button>
  );
}