import React from 'react';
import { FileTextOutlined, CheckCircleOutlined, ClockCircleOutlined, WarningOutlined, EditOutlined } from '@ant-design/icons';
import StatCard from './StatCard';

const stats = [
  {
    icon: <FileTextOutlined className="text-lg" />,
    title: 'Total',
    count: 20,
    amount: 46218.04,
    color: '#1677ff',
  },
  {
    icon: <CheckCircleOutlined className="text-lg" />,
    title: 'Paid',
    count: 10,
    amount: 23110.23,
    color: '#52c41a',
  },
  {
    icon: <ClockCircleOutlined className="text-lg" />,
    title: 'Pending',
    count: 6,
    amount: 13825.05,
    color: '#faad14',
  },
  {
    icon: <WarningOutlined className="text-lg" />,
    title: 'Overdue',
    count: 2,
    amount: 4655.63,
    color: '#ff4d4f',
  },
  {
    icon: <EditOutlined className="text-lg" />,
    title: 'Draft',
    count: 2,
    amount: 4627.13,
    color: '#8c8c8c',
  },
];

const StatisticsOverview = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
      {stats.map((stat, index) => (
        <StatCard key={index} {...stat} />
      ))}
    </div>
  );
};

export default React.memo(StatisticsOverview);