"use client";

import Header from "@/components/Header/index";
import Sidebar from "@/components/Sidebar";
import React, { useState } from "react";

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div data-cmp="DashboardLayout" className="min-h-screen bg-muted/30">
      <Sidebar />

      {/* Mobile Sidebar Overlay */}
      {sidebarOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
      )}

      <div className={`md:pl-64 flex flex-col min-h-screen transition-all duration-300`}>
        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
        <main className="flex-1 p-4 md:p-8 animate-in fade-in duration-500">{children}</main>
      </div>
    </div>
  );
};

export default Layout;
