import { getCollectionProducts } from 'lib/shopware';
import { isSeoUrls } from 'lib/shopware/helpers';
import Link from 'next/link';
import { GridTileImage } from './grid/tile';

export async function Carousel() {
  const collectionName = isSeoUrls()
    ? 'Summer-BBQ/Hidden-Carousel-Category'
    : 'ff7bf3c59f1342a685844fbf8fdf9dc8';
  const { products } = await getCollectionProducts({
    collection: collectionName
  });

  if (!products?.length) return null;

  // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
  const carouselProducts = [...products, ...products, ...products];

  return (
    <div className=" w-full overflow-x-auto pb-6 pt-1">
      <ul className="flex animate-carousel gap-4">
        {carouselProducts.map((product, i) => (
          <li
            key={`${product.path}${i}`}
            className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
          >
            <Link href={`/product/${product.path}`} className="relative h-full w-full">
              <GridTileImage
                alt={product.title}
                label={{
                  title: product.title,
                  amount: product.priceRange.maxVariantPrice.amount,
                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
                }}
                src={product.featuredImage?.url}
                fill
                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
              />
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}