const AdminDashboard = () => {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold text-slate-800">Admin Dashboard</h1>
        <p className="text-slate-500">Review and manage content submissions</p>
      </div>

      {/* STAT CARDS */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {[
          {
            title: "Open Tasks",
            value: 2,
            color: "bg-yellow-500",
            growth: "+3",
          },
          {
            title: "Closed Tasks",
            value: 2,
            color: "bg-green-600",
            growth: "+5",
          },
          {
            title: "Total Submissions",
            value: 4,
            color: "bg-blue-600",
            growth: "+12%",
          },
          {
            title: "Rejected",
            value: 7,
            color: "bg-red-600",
            growth: "-1",
          },
        ].map((card, i) => (
          <div
            key={i}
            className="bg-white rounded-2xl shadow border p-6 flex justify-between items-center"
          >
            <div>
              <p className="text-sm text-slate-500">{card.title}</p>
              <h2 className="text-3xl font-bold text-slate-800 mt-2">
                {card.value}
              </h2>
            </div>

            <div className="text-right">
              <p className="text-sm text-green-600 font-medium">
                {card.growth}
              </p>
              <div className={`w-10 h-10 rounded-xl mt-2 ${card.color}`} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};