import React from 'react';
import { Card, Tooltip } from 'antd';
import { useNavigate } from 'umi';

interface QuickActionCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  themeColor: string;
  to: string;
}

const QuickActionCard: React.FC<QuickActionCardProps> = ({
  icon,
  title,
  description,
  themeColor,
  to,
}) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(to);
  };

  return (
    <Tooltip title={title}>
      <Card
        hoverable
        onClick={handleClick}
        style={{
          width: '100%',
          height: 160,
          borderRadius: 8,
          transition: 'all 0.3s ease',
          cursor: 'pointer',
          border: 'none',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        }}
        styles={{
          body: {
            padding: 24,
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: 12,
          }
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'translateY(-4px)';
          e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)';
          e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
        }}
      >
        <div style={{ fontSize: 48, color: themeColor }}>
          {icon}
        </div>
        <div style={{
          fontSize: 18,
          fontWeight: 600,
          color: '#262626',
          textAlign: 'center'
        }}>
          {title}
        </div>
        <div style={{
          fontSize: 14,
          color: '#8c8c8c',
          textAlign: 'center'
        }}>
          {description}
        </div>
      </Card>
    </Tooltip>
  );
};

export default QuickActionCard;
