import { Outlet, useLocation } from "react-router-dom";
import Sidebar from "./Sidebar/sidebar";
import Header from "./Header/header";

export default function Layout() {
    const location = useLocation();
    const path = location.pathname;

    // لیست الگوهایی که باید هدر نشون داده بشه
    const headerPaths = [
        "/management",
        "/management/",
        "/management/cafes",
        "/edit-cafe",
        "/edit-cafe/",
        "/cafe",
        "/cafes",
        "/admin",
    ];

    // بررسی: اگر هرکدوم از الگوها داخل path بود، هدر نمایش داده میشه
    const showHeader = headerPaths.some(
        (p) => path.startsWith(p) || path.includes(p)
    );

    return (
        <div className="flex flex-row min-h-screen bg-[#FDF8F4]">
            {/* Sidebar - در موبایل overlay، در دسکتاپ ثابت */}
            <Sidebar />

            {/* Main Content */}
            <div className="flex-1 flex flex-col min-h-screen w-full lg:mr-[220px]">
                {showHeader && (
                    <div className="fixed top-0 right-0 left-0 lg:right-[220px] z-30 bg-[#FDF8F4]">
                        <Header title="مدیریت کافه‌ها" />
                    </div>
                )}

                <main className={`flex-1 w-full overflow-x-hidden p-4 md:p-6 bg-[#FDF8F4] ${showHeader ? 'pt-20 lg:pt-24' : 'pt-16 lg:pt-6'}`}>
                    <div className="max-w-full mx-auto">
                        <Outlet />
                    </div>
                </main>
            </div>
        </div>
    );
}