"use client";
import React, { useState, useEffect, ReactNode } from "react";
import Header from "@/components/header/Header";
import ClientMenu from "@/components/menu/menu";
import { DashboardLayoutProps } from "./schema";
import { Language } from "@/components/common/schemas";

// Page Content component to wrap the children
interface PageContentProps {
  children: ReactNode;
  lang: Language;
}

const PageContent: React.FC<PageContentProps> = ({ children, lang }) => {
  return (
    <div className="container mx-auto p-4">
      {React.cloneElement(children as React.ReactElement<any>, { lang })}
    </div>
  );
};

export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
  children,
  lang,
  activePage,
}) => {
  const [language, setLanguage] = useState<Language>(lang as Language);

  return (
    <div className="min-h-screen min-w-screen flex h-screen w-screen">
      {/* Sidebar */}
      <aside className="w-1/4 border-r p-4 overflow-y-auto">
        <ClientMenu lang={language} activePage={activePage} />
      </aside>

      {/* Main Content Area */}
      <div className="flex flex-col w-3/4 overflow-y-auto">
        {/* Header Component - Either custom or default */}
        <Header lang={language} setLang={setLanguage} />
        {/* Page Content */}
        <PageContent lang={language}>{children}</PageContent>
      </div>
    </div>
  );
};

export default DashboardLayout;