import React from 'react';
import { MyIcons } from '@/common';

interface CustomLogoProps {
  collapsed: boolean;
}

export const CustomLogo: React.FC<CustomLogoProps> = ({ collapsed }) => {
  return (
    <div className="custom-logo">
      <div className="logo-icon">
        <MyIcons.HomeOutlined style={{ fontSize: '32px', color: '#1890ff' }} />
      </div>
      {!collapsed && (
        <div className="logo-text">
          物业管理系统
        </div>
      )}
    </div>
  );
};

// Styles will be defined in global.less:
// .custom-logo { display: flex; align-items: center; height: 64px; ... }
// .custom-logo .logo-icon { font-size: 32px; min-width: 32px; ... }
// .custom-logo .logo-text { margin-left: 12px; font-size: 16px; ... }
// .ant-layout-sider-collapsed .custom-logo .logo-text { display: none; }