import { Outlet } from 'react-router';
import { Layout } from 'antd';
import Sidebar from './Sidebar';
import Header from './Header';
import Footer from '@/components/Footer';
import { useAppStore } from '@/stores/useAppStore';

const AdminLayout: React.FC = () => {
  const collapsed = useAppStore((s) => s.collapsed);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sidebar />
      <Layout style={{ marginLeft: collapsed ? 64 : 230, transition: 'margin-left 0.2s' }}>
        <Header />
        <Layout.Content style={{ margin: 12, overflow: 'initial', minHeight: 280 }}>
          <Outlet />
        </Layout.Content>
        <Footer />
      </Layout>
    </Layout>
  );
};

export default AdminLayout;