"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) => {
    const pathSegments = path.split("/").filter(Boolean);

    if (pathSegments.length <= 1) return "Overview";
    const purePath = `/${pathSegments.slice(1).join("/")}`;

    const titles: Record<string, string> = {
      "/users": "Users",
      "/settings": "Settings",
      "/profile": "Profile",
      "/songs": "Songs Database",
      "/events": "Worship & Events",
    };

    return titles[purePath] || "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;