'use client';
  import Image from 'next/image';
  import { useRouter } from 'next/navigation';
  import { useEffect, useRef, useState, useTransition } from 'react';
import { IoIosArrowDown } from 'react-icons/io';

  export default function LanguageSwitcher({ locale, textColor="" }: any) {
    const router = useRouter();
    const [isPending, startTransition] = useTransition();
    const [isOpen, setIsOpen] = useState(false);
    const [selectedLang, setSelectedLang] = useState(locale);

    const dropdownRef = useRef<HTMLDivElement>(null); // ref to the container

    const languages = [
      { code: "en", name: "English", flag: "/us-flag.webp" },
      { code: "ar", name: "عربي", flag: "/saudi-flag.svg" },
    ];

    const handleSelect = (code: string) => {
      setSelectedLang(code);
      setIsOpen(false);
      startTransition(() => {
        document.cookie = `NEXT_LOCALE=${code}; path=/; max-age=31536000`;
        router.refresh();
      });
    };
    useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
          setIsOpen(false);
        }
      };

      document.addEventListener('mousedown', handleClickOutside);
      return () => {
        document.removeEventListener('mousedown', handleClickOutside);
      };
    }, []);

    return (
      <div className="relative" ref={dropdownRef}>
        {/* Language Button */}
        <div className="flex items-center min-w-14 sm:min-w-0 gap-1 cursor-pointer max-sm:gap-[3px] dark:text-neutrals400" onClick={() => setIsOpen(!isOpen)}>
          <Image className='min-w-6'
            src={languages.find((lang) => lang.code != selectedLang)?.flag || ""}
            alt={selectedLang.toUpperCase()}
            width={24}
            height={15}
            priority
          />
          <span className={`text-sm font-medium sm:flex ${textColor ? textColor :'text-[#0c2632]'} dark:text-neutrals400 sm:flex`}>
            {/* {selectedLang.toUpperCase()} */}
            {languages.find((lang) => lang.code != selectedLang)?.code.toUpperCase() || ""}
          </span>
          <IoIosArrowDown />
        </div>

        {isOpen && (
          <div className="absolute left-0 transform -translate-x-1/2  top-full mt-0.5 bg-white border shadow-Shadow1 border-neutrals200 rounded-lg z-40 w-40 p-2 dark:bg-card dark:border-darkborder rtl:left-0 rtl:translate-x-0 max-lg:left-0">
            {languages.map((lang, index) => {
              const isLast = index === languages.length - 1;
              return (
                <div
                  key={lang.code}
                  className={`flex items-center justify-between px-1.5 py-2 hover:bg-neutrals50 rounded-lg cursor-pointer dark:hover:bg-background ${
                    selectedLang === lang.code ? "bg-gray-100 dark:bg-background" : ""
                  }`}
                  onClick={() => handleSelect(lang.code)}
                >
                  <div className="flex items-center gap-2">
                    <Image src={lang.flag} alt={lang.name} width={20} height={15} priority />
                    <span
                      className={`text-neutrals800 dark:text-neutrals400 
                        ${selectedLang === lang.code ? "text-primary500 dark:text-primary400" : ""} 
                        ${isLast ? "transform -translate-y-1" : ""}
                      `}
                    >
                      {lang.name}
                    </span>
                  </div>
                  {selectedLang === lang.code && (
                    <div className="flex items-center justify-center w-4 h-4 rounded-full bg-primary500 dark:bg-primary400">
                      <svg
                        width="10"
                        height="8"
                        viewBox="0 0 10 8"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fillRule="evenodd"
                          clipRule="evenodd"
                          d="M9.11389 0.173964C9.48827 0.452946 9.55465 0.968589 9.26218 1.32569L4.78191 6.79573C4.63433 6.97592 4.41463 7.08919 4.17576 7.10825C3.93688 7.12732 3.70051 7.05043 3.52359 6.89615L0.835436 4.55185C0.484813 4.24607 0.46045 3.72708 0.781019 3.39264C1.10159 3.0582 1.6457 3.03496 1.99633 3.34073L3.99844 5.08675L7.90644 0.315403C8.19893 -0.0416927 8.73951 -0.105017 9.11389 0.173964Z"
                          fill="white"
                          className="dark:fill-white"
                        />
                      </svg>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }