import React from 'react';
import { Space, Tooltip } from 'antd';
import {
  BuildingOutlined,
  ImportOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'umi';

const QuickActionIcons: React.FC = () => {
  const navigate = useNavigate();

  const quickActions = [
    {
      icon: <BuildingOutlined style={{ fontSize: 20 }} />,
      title: '添加机构',
      path: '/company/list',
    },
    {
      icon: <ImportOutlined style={{ fontSize: 20 }} />,
      title: '导入项目',
      path: '/asset/list',
    },
    {
      icon: <TeamOutlined style={{ fontSize: 20 }} />,
      title: '导入员工',
      path: '/company/employees',
    },
  ];

  return (
    <Space size={16}>
      {quickActions.map((action) => (
        <Tooltip key={action.path} title={action.title}>
          <div
            onClick={() => navigate(action.path)}
            style={{
              fontSize: 20,
              color: '#262626',
              cursor: 'pointer',
              padding: '4px 8px',
              borderRadius: 4,
              transition: 'all 0.3s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.color = '#1890ff';
              e.currentTarget.style.backgroundColor = 'rgba(24, 144, 255, 0.1)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.color = '#262626';
              e.currentTarget.style.backgroundColor = 'transparent';
            }}
          >
            {action.icon}
          </div>
        </Tooltip>
      ))}
    </Space>
  );
};

export default QuickActionIcons;
