"use client";

import { Layout } from "antd";
import type { ReactNode } from "react";
import { useState } from "react";

import { AppBreadcrumbs } from "./Breadcrumbs";
import { AppHeader } from "./Header";
import { AppSidebar } from "./Sidebar";

const { Content } = Layout;

type AppLayoutProps = {
  children: ReactNode;
};

export function AppLayout({ children }: AppLayoutProps) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <AppSidebar collapsed={collapsed} onCollapse={setCollapsed} />
      <Layout>
        <AppHeader />
        <Content style={{ margin: "24px", padding: 24, background: "#fff", borderRadius: 12, minHeight: "calc(100vh - 120px)" }}>
          <AppBreadcrumbs />
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}