import {
  LuPackage,
  LuTags,
  LuShoppingCart,
  LuUsers,
  LuArrowUpRight,
} from "react-icons/lu";

const stats = [
  {
    title: "Total Products",
    value: "0",
    icon: LuPackage,
  },
  {
    title: "Categories",
    value: "0",
    icon: LuTags,
  },
  {
    title: "Orders",
    value: "0",
    icon: LuShoppingCart,
  },
  {
    title: "Customers",
    value: "0",
    icon: LuUsers,
  },
];

export default function AdminDashboard() {
  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-800">
          Dashboard
        </h1>

        <p className="mt-1 text-sm text-gray-400">
          Welcome back. Here's what's happening with your pharmacy.
        </p>
      </div>

      <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
        {stats.map((stat) => {
          const Icon = stat.icon;

          return (
            <div
              key={stat.title}
              className="rounded-2xl border border-[#EAECEF] bg-white p-5 shadow-[0_2px_12px_rgba(0,0,0,0.03)]"
            >
              <div className="flex items-start justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#F8F1FB] text-[#B570D4]">
                  <Icon size={21} strokeWidth={1.7} />
                </div>

                <div className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-300">
                  <LuArrowUpRight size={17} />
                </div>
              </div>

              <p className="mt-5 text-sm text-gray-400">
                {stat.title}
              </p>

              <h3 className="mt-1 text-2xl font-bold text-gray-800">
                {stat.value}
              </h3>
            </div>
          );
        })}
      </div>

      <div className="mt-6 rounded-2xl border border-[#EAECEF] bg-white p-8">
        <h2 className="text-lg font-semibold text-gray-800">
          Getting Started
        </h2>

        <p className="mt-2 max-w-2xl text-sm leading-6 text-gray-400">
          Start by creating your pharmacy categories and
          subcategories. Products can then be assigned to them
          from the product management section.
        </p>

        <a
          href="/admin/categories"
          className="mt-5 inline-flex items-center gap-2 rounded-xl bg-[#B570D4] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90"
        >
          Manage Categories
          <LuArrowUpRight size={17} />
        </a>
      </div>
    </div>
  );
}