import React from 'react';
import { Layout } from 'antd';
import 主要LOGO from '../assets/主要LOGO.svg';

const { Header, Content, Footer } = Layout;

export const UserLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <Layout className="min-h-screen bg-gray-50">
      <Header className="bg-white shadow-sm flex items-center px-6 h-16 sticky top-0 z-10">
        <img src={主要LOGO} alt="主要LOGO" style={{ width: '180px', height: '72px' }} />
      </Header>
      
      <Content className="flex flex-col">
        <div className="flex-1 p-4 md:p-8 bg-gradient-to-br from-mars-50/30 to-white">
           {children}
        </div>
      </Content>

      <Footer className="bg-white border-t border-gray-100 py-3 px-2 flex flex-col md:flex-row justify-center items-center text-gray-400 text-sm">
        <div className="md:mb-0 whitespace-nowrap">
          &copy; {new Date().getFullYear()} Boonlive OA System. All Rights Reserved.
        </div>
      </Footer>
    </Layout>
  );
};
