import { Link } from "react-router-dom";
import { ShoppingBag, Package, Tag, ClipboardList, ArrowRight } from "lucide-react";
import CmsLayout from "./CmsLayout";
import { PageHeader } from "./ui";

const cards = [
  {
    to: "/admin/cms/shop/products",
    icon: Package,
    title: "Products",
    desc: "Create, edit and publish items in your online shop.",
    tone: "from-emerald-600 to-emerald-500",
  },
  {
    to: "/admin/cms/shop/categories",
    icon: Tag,
    title: "Categories",
    desc: "Organize your catalog with categories.",
    tone: "from-teal-600 to-teal-500",
  },
  {
    to: "/admin/cms/shop/orders",
    icon: ClipboardList,
    title: "Orders",
    desc: "Track, fulfill and update customer orders.",
    tone: "from-indigo-600 to-indigo-500",
  },
];

export default function CmsShop() {
  return (
    <CmsLayout>
      <PageHeader
        icon={<ShoppingBag className="w-6 h-6" />}
        title="E-commerce Shop"
        description="Manage products, categories and customer orders for the DoItEasy Shop."
      />
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Link
              key={c.to}
              to={c.to}
              className="group bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-xl hover:-translate-y-0.5 transition"
            >
              <div
                className={`w-12 h-12 rounded-xl bg-gradient-to-br ${c.tone} text-white flex items-center justify-center mb-4 shadow`}
              >
                <Icon className="w-6 h-6" />
              </div>
              <div className="text-lg font-bold text-slate-900">{c.title}</div>
              <p className="text-sm text-slate-500 mt-1 mb-4">{c.desc}</p>
              <span className="text-sm font-semibold text-[#0b6e3e] inline-flex items-center gap-1 group-hover:gap-2 transition-all">
                Open <ArrowRight className="w-4 h-4" />
              </span>
            </Link>
          );
        })}
      </div>
    </CmsLayout>
  );
}