import { type FC } from 'react'

interface StatCardProps {
    title: string
    value: number
    icon: React.ReactNode
}

const StatCard: FC<StatCardProps> = ({ title, value, icon }) => {
    return (
        <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
            <div className="flex items-center justify-between">
                <div>
                    <p className="text-sm text-gray-600">{title}</p>
                    <p className="text-2xl font-bold text-gray-900">{value?.toLocaleString() || 0}</p>
                </div>
                <div className="p-3 bg-gray-50 rounded-full">
                    {icon}
                </div>
            </div>
        </div>
    )
}

export default StatCard
