// Generated with util/create-component.js
import React from "react";
import SlideWrapper from "../../SlideWrapper";
import Text from "../../UI/Text";
import ProductItem from "./ProductItem";
import { ProductListProps } from "./ProductList.types";

const ProductList: React.FC<ProductListProps> = ({
  productListData,
  title,
}) => {
  const productListContents = productListData.map((product, i) => {
    return <ProductItem data={product} key={product.modelName + i} />;
  });

  return (
    <div
      data-testid="ProductList"
      className="nrc--ProductList p-[2rem] pc:w-[80rem]"
    >
      {title && (
        <div className="mb-[1.2rem] flex gap-[0.5rem]">
          {title.link && (
            <a href={title.linkTo ? title.linkTo : ""}>
              <Text type="B5" className="text-gray-10">
                {title.link}
              </Text>
            </a>
          )}
          {title.rest && (
            <Text type="B5" className="text-gray-10">
              {title.rest}
            </Text>
          )}
        </div>
      )}

      <div className="scrollbar-hide flex gap-[1.6rem] overflow-x-auto pc:hidden">
        {productListContents}
      </div>

      <div className="mobile:hidden">
        <SlideWrapper size={6}>{productListContents}</SlideWrapper>
      </div>
    </div>
  );
};

export default ProductList;