import React from 'react';
import { Layout } from 'antd';
import { Logo } from '../components/common/Logo';

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">
        <Logo variant="primary" />
      </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-6 px-8 flex flex-col md:flex-row justify-between items-center text-gray-400 text-sm">
        <div className="mb-4 md:mb-0">
          &copy; {new Date().getFullYear()} Boonlive OA System. All Rights Reserved.
        </div>
        <Logo variant="secondary" />
      </Footer>
    </Layout>
  );
};