import Image from "next/image";
import type { Product } from "@/lib/data";
import { Carousel } from "./Carousel";
import { ProductCard } from "./ProductCard";

type Props = {
  id?: string;
  image: string;
  products: Product[];
  ariaLabel: string;
  tone?: "red" | "blue";
};

const gradients = {
  red: "linear-gradient(90deg, #ff3b3b 0%, #fc2424 45%, #d91010 100%)",
  blue: "linear-gradient(90deg, #4db3ff 0%, #1e88e5 48%, #0d5fb8 100%)",
};

export function ProductShelf({ id, image, products, ariaLabel, tone = "red" }: Props) {
  return (
    <section id={id} className="container-site mt-10">
      <div className="rounded-2xl p-4 md:p-5" style={{ background: gradients[tone] }}>
        <div className="flex items-stretch gap-3">
          <div className="relative w-[150px] sm:w-[190px] shrink-0 min-h-[300px]">
            <Image src={image} alt={ariaLabel} fill sizes="190px" className="object-contain object-center" />
          </div>
          <Carousel ariaLabel={ariaLabel} className="min-w-0 flex-1 py-1" tight>
            {products.map((product) => (
              <div key={product.id} className="snap-start shrink-0 w-[180px] sm:w-[200px]">
                <ProductCard product={product} />
              </div>
            ))}
          </Carousel>
        </div>
      </div>
    </section>
  );
}