import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
  HomeOutlined,
  TeamOutlined,
  UserAddOutlined,
  CalendarOutlined,
} from '@ant-design/icons';
import AttendanceSystem from './components/AttendanceSystem';
import MemberList from './components/MemberList';
import MemberForm from './components/MemberForm';
import Home from './components/Home';

const { Header, Content, Footer } = Layout;

function App() {
  return (
    <Router>
      <Layout className="layout" style={{ minHeight: '100vh' }}>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<TeamOutlined />}>
              <Link to="/members">会友列表</Link>
            </Menu.Item>
            <Menu.Item key="3" icon={<UserAddOutlined />}>
              <Link to="/add-member">添加会友</Link>
            </Menu.Item>
            <Menu.Item key="4" icon={<CalendarOutlined />}>
              <Link to="/attendance">考勤系统</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content" style={{ padding: 24, minHeight: 280 }}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/members" element={<MemberList />} />
              <Route path="/add-member" element={<MemberForm />} />
              <Route path="/attendance" element={<AttendanceSystem />} />
            </Routes>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>会友信息管理系统 ©2024 Created by Your Company</Footer>
      </Layout>
    </Router>
  );
}

export default App;