"use client";

import Link from "next/link";
import OfferCard from "@/components/offers/OfferCard";
import { Offer } from "@/types/offer";
import OffersSectionHeader from "@/components/offers/OffersSectionHeader";
import { useLanguage } from "@/context/LanguageContext";

type OffersSectionProps = {
  offers: Offer[];
};

export default function OffersSection({ offers }: OffersSectionProps) {
  const { t } = useLanguage();

  if (!offers.length) return null;

  return (
    <section className="relative overflow-hidden bg-[#FBF9F9] py-12 md:py-16 text-gray-800">
      <div
        className="absolute inset-0 opacity-75"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(46,53,83,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(46,53,83,0.05) 1px, transparent 1px)",
          backgroundSize: "44px 44px",
        }}
      />
      <div className="absolute top-[88px] left-[6%] h-14 w-14 bg-[#F8E8EF]" />
      <div className="absolute top-[70px] right-[10%] h-16 w-16 bg-[#F8E8EF]" />
      <div className="relative z-10 mx-auto max-w-7xl px-4 md:px-6">
        <OffersSectionHeader />

        <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {offers.slice(0, 6).map((offer) => (
            <OfferCard key={offer.id} offer={offer} />
          ))}
        </div>

        {offers.length > 6 && (
          <div className="mt-10 text-center">
            <Link
              href="/offers"
              className="inline-flex min-h-[44px] items-center justify-center rounded-full border border-[#FF3D8E] bg-white px-6 text-sm font-bold text-[#FF3D8E] transition hover:bg-[#FFF1F7]"
            >
              {t("view_all_offers")}
            </Link>
          </div>
        )}
      </div>
    </section>
  );
}