export default function SummaryCards() {
    const stats = [
      { label: 'Total Users', count: 1234 },
      { label: 'Doctors', count: 245 },
      { label: 'Patients', count: 820 },
      { label: 'Consultations', count: 530 },
    ];
  
    const colors = ['bg-blue-500', 'bg-red-500', 'bg-yellow-500', 'bg-green-500'];
  
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((stat, index) => (
          <div
            key={stat.label}
            className={`text-white rounded-lg shadow p-4 ${colors[index % colors.length]}`}
          >
            <h3 className="text-sm opacity-80">{stat.label}</h3>
            <p className="text-2xl font-bold">{stat.count}</p>
          </div>
        ))}
      </div>
    );
  }
  