"use client";

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

interface LayoutProps {
  children: React.ReactNode;
}

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

  const getPageTitle = (path: string) => {
    if (path === "/") return "Overview";
    
    const titles: Record<string, string> = {
      "/users": "Users",
      "/settings": "Settings",
      "/profile": "Profile",
      "/songs": "Songs Database",
      "/events": "Worship & Events",
    };

    return titles[path] || "Dashboard";
  };

  return (
    <div className="dashboard">
      <Sidebar open={sidebarOpen} close={() => setSidebarOpen(false)} />

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

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

export default Layout;