import { getDictionary } from "@/content";
import { isLocale } from "@/content/types";
import { getPublishedOffers } from "@/lib/actions/offers";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { OfferCard } from "@/components/sections/OfferCard";

export default async function OffersPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale: rawLocale } = await params;
  const locale = isLocale(rawLocale) ? rawLocale : "en";
  const dict = getDictionary(locale);
  const offers = await getPublishedOffers();

  return (
    <div className="mx-auto max-w-7xl px-4 pb-24 pt-32 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.map((offer) => (
            <OfferCard key={offer.id} offer={offer} dict={dict} locale={locale} />
          ))}
        </div>
      )}
    </div>
  );
}