interface UserStatsCardsProps {
  stats: {
    total: number;
    active: number;
    inactive: number;
    admins: number;
  };
}

export function UserStatsCards({ stats }: UserStatsCardsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div className="p-4 bg-muted/50 rounded-lg">
        <p className="text-sm text-muted-foreground">Total Users</p>
        <p className="text-2xl font-semibold">{stats.total}</p>
      </div>
      <div className="p-4 bg-green-50 rounded-lg">
        <p className="text-sm text-muted-foreground">Active</p>
        <p className="text-2xl font-semibold text-green-600">{stats.active}</p>
      </div>
      <div className="p-4 bg-red-50 rounded-lg">
        <p className="text-sm text-muted-foreground">Inactive</p>
        <p className="text-2xl font-semibold text-red-600">{stats.inactive}</p>
      </div>
      <div className="p-4 bg-purple-50 rounded-lg">
        <p className="text-sm text-muted-foreground">Admins</p>
        <p className="text-2xl font-semibold text-purple-600">{stats.admins}</p>
      </div>
    </div>
  );
}

