import { Routes, Route, Link, useLocation } from 'react-router-dom';
import ModelPage from './pages/ModelPage';
import { SidebarProvider, Sidebar, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from '@/components/ui/sidebar';
import { Home, Users } from 'lucide-react';

const menu = [
  { path: '/', label: '首页', icon: <Home className='mr-2' /> },
  { path: '/models', label: '模特维护', icon: <Users className='mr-2' /> },
];

function App() {
  const location = useLocation();
  return (
    <SidebarProvider>
      <div className='flex min-h-screen min-w-screen'>
        <Sidebar className='h-screen'>
          <SidebarContent>
            <div className='text-xl font-bold mb-8 px-4 pt-4'>Outfit 管理</div>
            <SidebarMenu>
              {menu.map(item => (
                <SidebarMenuItem key={item.path}>
                  <SidebarMenuButton asChild isActive={location.pathname === item.path}>
                    <Link to={item.path} className='flex items-center'>
                      {item.icon}
                      <span>{item.label}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarContent>
        </Sidebar>
        <main className='flex-1 p-8'>
          <Routes>
            <Route path='/' element={<div>首页内容</div>} />
            <Route path='/models' element={<ModelPage />} />
          </Routes>
        </main>
      </div>
    </SidebarProvider>
  );
}

export default App;