export default function DashboardStat({ icon, color, label, value }: { icon: React.ReactNode; color: string; label: string; value: string }) {
    return (
        <div className="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm flex flex-col items-center gap-4 hover:shadow-md transition-shadow">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}>{icon}</div>
            <div className='flex flex-col items-center'>
                <h4 className="text-xs text-gray-500 mb-1">{label}</h4>
                <strong className="text-lg text-gray-800">{value}</strong>
            </div>
        </div>
    );
}