import {
  CalendarDays,
  Gift,
  Package,
  RefreshCcw,
  Wrench,
  WalletCards,
} from "lucide-react";
import { offers as mockOffers, type Offer } from "@/lib/mock-data";

const categories = [
  {
    name: "Cashback Offers",
    summary: "Up to Rs. 20,000 instant savings",
    icon: WalletCards,
  },
  {
    name: "Low EMI Plans",
    summary: "Starting from Rs. 3,999/month",
    icon: CalendarDays,
  },
  {
    name: "Exchange Offers",
    summary: "Upgrade with exchange bonus",
    icon: RefreshCcw,
  },
  {
    name: "Festive Deals",
    summary: "Extra benefits this season",
    icon: Gift,
  },
  {
    name: "Accessories Bundles",
    summary: "Bundle benefits on accessories",
    icon: Package,
  },
  {
    name: "Service Offers",
    summary: "Check-up and service support",
    icon: Wrench,
  },
];

type OfferCategoryCardsProps = {
  offers?: Offer[];
};

export function OfferCategoryCards({ offers = mockOffers }: OfferCategoryCardsProps) {
  return (
    <section className="bg-white py-10">
      <div className="container-custom">
        <h2 className="mb-5 text-2xl font-bold text-navy-deep">
          Top Offer Categories
        </h2>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          {categories.map((category) => {
            const Icon = category.icon;
            const count = offers.filter((offer) => offer.category === category.name).length;
            return (
              <article className="soft-card p-5 text-center" key={category.name}>
                <span className="mx-auto inline-flex h-14 w-14 items-center justify-center rounded-full bg-ev text-white shadow-soft">
                  <Icon className="h-6 w-6" />
                </span>
                <h3 className="mt-4 text-base font-bold text-navy-deep">
                  {category.name}
                </h3>
                <p className="mt-2 text-sm leading-6 text-navy-muted">
                  {category.summary}
                </p>
                <p className="mt-3 text-xs font-bold uppercase tracking-[0.12em] text-primary">
                  {count} active
                </p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}