"use client";

import { getCookie, setCookie } from "cookies-next";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import Link from "next/link";

export default function SelectLanguage() {
  const router = useRouter();
  const [isOpen, setisOpen] = useState(false);
  const [currentLocale, setCurrentLocale] = useState("");

  useEffect(() => {
    const sl = getCookie("selectedLocale");
    const dl = getCookie("defaultLocale");
    setCurrentLocale(sl || dl || "en");
  }, []);

  return (
    <div className="relative flex min-w-[100px] justify-center">
      <p
        onClick={() => setisOpen(!isOpen)}
        className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[15px] font-[600] text-[#FD6F00] hover:text-[#FD6F00] xl:text-[20px]"
      >
        {currentLocale}
      </p>

      <ul
        className={`absolute start-0 z-20 flex w-full flex-col items-center gap-2 rounded-lg border bg-white dark:bg-zinc-900 dark:text-white text-black py-3 transition-all ${isOpen ? "top-[50px] scale-100" : "top-0 scale-0"}`}
      >
        <Link
          href=""
          className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] dark:text-white text-black pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00] dark:hover:text-[#FD6F00]"
          onClick={(e) => {
            e.preventDefault();
            setCookie("selectedLocale", "fa"), router.refresh();
            setisOpen(false);
          }}
        >
          فارسی
        </Link>
        <Link
          href=""
          className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] dark:text-white text-black pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00] dark:hover:text-[#FD6F00]"
          onClick={(e) => {
            e.preventDefault();
            setCookie("selectedLocale", "en"), router.refresh();
            setisOpen(false);
          }}
        >
          English
        </Link>
      </ul>
    </div>
  );
}