import React from 'react';
import { Card } from 'antd';
import { formatCurrency } from '@/utils/format';

const StatCard = ({ icon, title, count, amount, color = '#1677ff' }) => {
  return (
    <div className="flex-1">
      <Card 
        styles={{ 
          body: { 
            padding: '20px',
            height: '100%',
            background: 'var(--color-bg-container)',
          }
        }}
        className="h-full hover:shadow-md transition-shadow duration-300"
      >
        <div className="flex items-start gap-4">
          <div 
            className="w-12 h-12 rounded-full flex items-center justify-center text-lg"
            style={{ 
              backgroundColor: `${color}15`,
            }}
          >
            <span style={{ color }}>{icon}</span>
          </div>
          <div className="flex-1">
            <h3 className="text-base text-gray-500 dark:text-gray-400 m-0">
              {title}
            </h3>
            <div className="text-sm text-gray-400 dark:text-gray-500 mt-1">
              {count} invoices
            </div>
            <div className="text-xl font-semibold mt-2 dark:text-white">
              {formatCurrency(amount)}
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default StatCard;