"use client";
import { useLocale } from 'next-intl';
import { usePathname } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Globe } from "lucide-react";

export function LanguageSwitcher({ className, seeLang = false }: { className?: string, seeLang?: boolean }) {
    const pathname = usePathname();
    const currentLocale = useLocale();
    const searchParams = useSearchParams();

    const nowPath = "/" + pathname.split('/').slice(1).join('/');

    const changeLanguage = (newLocale: string) => {
        const params = searchParams.toString();
        const query = params ? `?${params}` : '';
        const newUrl = `/${newLocale}${nowPath}${query}`;
        window.location.href = newUrl;
    };

    return (
        <div>
            <Button
                size={"sm"}
                variant={"secondary"}
                dir={currentLocale === "en" ? "rtl" : "ltr"}
                className={className}
                onClick={() => changeLanguage(currentLocale === "en" ? "ar" : "en")}
            >
                <Globe className="size-4 mr-2" />
                {seeLang && <span className="hidden md:inline">{currentLocale === "en" ? "اللغة العربية" : "English"}</span>}
            </Button>
        </div>
    );
}