// 'use client';
// import { useTranslation } from "@/Utils/Hooks/useTranslate";

// export default function LanguageDropdown({ className = '' }: { className?: string }) {
//     const { available, locale, setLanguage } = useTranslation();

//     return (
//         <div className={`relative ${className}`}>
//             <select
//                 value={locale}
//                 onChange={(e) => setLanguage(e.target.value as any)}
//                 className="bg-white border border-dark-gray/30 rounded-xl py-2.5 ps-3 pe-8 text-sm focus:outline-none appearance-none"
//                 aria-label="Select language"
//             >
//                 {available.map(l => (
//                     <option key={l.code} value={l.code}>
//                         {l.label}
//                     </option>
//                 ))}
//             </select>

//             {/* caret */}
//             <svg className="pointer-events-none absolute end-2 top-1/2 -translate-y-1/2" width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
//                 <path d="M12.9401 1.7124L8.05006 6.6024C7.47256 7.1799 6.52756 7.1799 5.95006 6.6024L1.06006 1.7124" stroke="#878787" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
//             </svg>
//         </div>
//     );
// }

'use client';
import { useState } from "react";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import { GlobeIconSVG } from "../SVGs/CommonSVG";
import useOutsideDropdown from "@/Utils/Hooks/useOutsideDropdown";

export default function LanguageDropdown({ className = '' }: { className?: string }) {
    const { available, locale, setLanguage } = useTranslation();
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();

    return (
        <div className={`relative ${className}`} ref={ref}>

            <button
                onClick={() => setIsComponentVisible(!isComponentVisible)}
                className="px-3 py-2 rounded-full hover:bg-neutral-100 active:bg-neutral-200 transition-all flex items-center gap-2 text-sm font-medium text-neutral-700"
                aria-label="Select language"
            >
                <GlobeIconSVG />
                <span className="max-sm:hidden">{available?.find(l => l.code === locale)?.label}</span>
            </button>

            {isComponentVisible && (
                <div className="absolute right-0 mt-2 glass rounded-2xl shadow-pop py-1.5 w-32 z-50 animate-scale-in">
                    {available.map(l => (
                        <button
                            key={l.code}
                            className={`text-left px-4 py-2 text-sm rounded-xl mx-1 w-[calc(100%-0.5rem)] hover:bg-primary/10 transition-colors ${locale === l.code ? "text-primary font-semibold" : "text-neutral-700"}`}
                            onClick={() => {
                                setLanguage(l.code as any);
                                setIsComponentVisible(false);
                            }}
                        >
                            {l.label}
                        </button>
                    ))}

                </div>
            )}
        </div>
    );
}