import React from "react";
import { Users, Building2, Mail, FileText } from "lucide-react";

const stats = [
  { name: "Total Users", stat: "15", icon: Users, color: "bg-blue-500" },
  { name: "Active Vendors", stat: "8", icon: Building2, color: "bg-green-500" },
  { name: "Pending Invitations", stat: "3", icon: Mail, color: "bg-yellow-500" },
  { name: "Open Orders", stat: "12", icon: FileText, color: "bg-purple-500" },
];

export default function Dashboard() {
  return (
    <div>
      <h1 className="text-3xl font-bold text-slate-800">Admin Dashboard</h1>
      <p className="mt-2 text-base text-slate-600">
        Welcome to the Krow Admin Console. Here is a quick overview of the platform.
      </p>

      <div className="mt-8">
        <dl className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((item) => (
            <div key={item.name} className="relative overflow-hidden rounded-2xl bg-white px-4 py-5 shadow-lg sm:px-6 sm:py-6">
              <dt>
                <div className={`absolute rounded-xl p-3 ${item.color}`}>
                  <item.icon className="h-8 w-8 text-white" aria-hidden="true" />
                </div>
                <p className="ml-20 truncate text-sm font-medium text-gray-500">{item.name}</p>
              </dt>
              <dd className="ml-20 flex items-baseline">
                <p className="text-3xl font-semibold text-gray-900">{item.stat}</p>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </div>
  );
}
