import { SectionHeading } from "@/components/ui/SectionHeading";
import { Button } from "@/components/ui/Button";
import { OfferCard } from "@/components/sections/OfferCard";
import type { Dictionary, Locale } from "@/content/types";
import type { Offer } from "@/generated/prisma/client";

export function OffersSection({
  dict,
  locale,
  offers,
}: {
  dict: Dictionary;
  locale: Locale;
  offers: Offer[];
}) {
  return (
    <section id="offers" className="bg-charcoal-50/40 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={dict.offers.eyebrow}
          title={dict.offers.title}
          titleAccent={dict.offers.titleAccent}
          subtitle={dict.offers.subtitle}
        />
        {offers.length === 0 ? (
          <p className="mt-16 text-center text-charcoal-400">{dict.offers.emptyState}</p>
        ) : (
          <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {offers.slice(0, 6).map((offer) => (
              <OfferCard key={offer.id} offer={offer} dict={dict} locale={locale} />
            ))}
          </div>
        )}
        {offers.length > 0 ? (
          <div className="mt-12 text-center">
            <Button href={`/${locale}/offers`} variant="secondary">
              {dict.offers.viewAll}
            </Button>
          </div>
        ) : null}
      </div>
    </section>
  );
}