import { Carousel } from "@/components/ui/Carousel";
import { Placeholder } from "@/components/ui/Placeholder";
import { ProductCard } from "@/components/ui/ProductCard";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { specialSaleProducts } from "@/data/sample";

function SpecialSaleBanner() {
  return (
    <a
      href="#"
      className="relative w-[220px] shrink-0 self-stretch overflow-hidden rounded-xl border border-border md:w-[240px]"
    >
      <Placeholder
        width="100%"
        label="240×380"
        className="h-full min-h-[380px] w-full rounded-none border-0"
      />
    </a>
  );
}

export function SpecialSaleCarousel() {
  return (
    <section className="border-y border-red-light bg-red-light/30 py-10 md:py-14">
      <div className="mx-auto max-w-7xl px-4">
        <SectionTitle
          title="فروش ویژه"
          enTitle="Special Sale"
          action="مشاهده همه"
        />
        <Carousel ariaLabel="کاروسل فروش ویژه">
          <SpecialSaleBanner />
          {specialSaleProducts.map((product) => (
            <ProductCard
              key={product.id}
              name={product.name}
              brand={product.brand}
              price={product.price}
              oldPrice={product.oldPrice}
              discount={product.discount}
              variant="sale"
            />
          ))}
        </Carousel>
      </div>
    </section>
  );
}