"use client";
import Sidebar from "@/components/layout/Sidebar";
import { useAuthStore } from "@/zustand/auth/useAuthStore";
import React, { useEffect, useState } from "react";
import { getCookie } from "cookies-next";
import PageLoader from "@/components/PageLoader/PageLoader";

type Props = {
  children: React.ReactNode;
};

const layout = ({ children }: Props) => {
  const { sidebarToggle, updateSidebarToggle } = useAuthStore();
  const { language, setLanguage } = useAuthStore();
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const lang = getCookie('language') as string ?? 'en';
    setLanguage(lang);
  }, []);

  useEffect(() => {
    const checkLanguage = () => {
      const lang = getCookie('language') as string ?? 'en';
      if (lang !== language) {
        setLanguage(lang);

      }
    };

    // Check immediately
    checkLanguage();

    // Set up interval to check for cookie changes
    const interval = setInterval(() => {
      checkLanguage();
      setIsLoading(false);
    }, 100);

    return () => clearInterval(interval);
  }, [language]);

  return (
    <div className="flex items-start">
      {isLoading && <PageLoader />}
      <Sidebar
        setToggleSidebar={updateSidebarToggle}
        toggleSidebar={sidebarToggle}
      />

      <div
        className={`w-full duration-300 p-4 lg:py-7 lg:px-6 2xl:px-7.5 2xl:py-9 ease-in-out ${language === "en" ? `${sidebarToggle ? "xl:w-[calc(100%-120px)] xl:ml-[120px]" : "2xl:w-[calc(100%-360px)] 2xl:ml-[360px] xl:w-[calc(100%-310px)] xl:ml-[310px]"
          }` : `${sidebarToggle ? "xl:w-[calc(100%-120px)] xl:mr-[120px]" : "2xl:w-[calc(100%-360px)] 2xl:mr-[360px] xl:w-[calc(100%-310px)] xl:mr-[310px]"
          }`}`}
      >
        {children}
      </div>
    </div>
  );
};

export default layout;