// Generated with util/create-component.js
import React from "react";
import Link from "../../shared/Link";
import NrcStoreItem from "../../StoreItem";
import TextElement from "../Text";
import { StoreProductProps } from "./StoreProduct.types";

const StoreProduct = ({
  numberOfColumns,
  storeProductDataList,
  showNosearchTwoLines,
  showContent,
  nosearchTwoLines,
  editorContent,
  isLogin,
  NextImage,
  NewTabLink,
  isMobile = true,
}: StoreProductProps) => {
  const isOneColumnStyle = numberOfColumns === "1";

  return (
    <div
      className={`w-full p-[2rem] ${
        isOneColumnStyle
          ? isMobile
            ? "pt-[1rem]"
            : ""
          : isMobile
          ? "grid grid-cols-2 gap-[1.5rem]"
          : "grid grid-cols-2 gap-[2rem]"
      }`}
      style={{
        gridTemplateColumns: `repeat(${numberOfColumns}, minmax(0, 1fr))`,
      }}
    >
      {storeProductDataList.map((storeProductData, index) => {
        if (isOneColumnStyle && index > 0) {
          return;
        }

        const { goodsNo, goodsName } = storeProductData;

        return (
          <Link
            key={`StoreProduct_${goodsNo}_${goodsName}`}
            href={`/mall/product/${goodsNo}`}
            NewTabLink={NewTabLink}
            className="w-full"
          >
            <NrcStoreItem
              data={storeProductData}
              isLogin={isLogin}
              imageSizeClassName={
                isOneColumnStyle
                  ? isMobile
                    ? "w-[12rem] h-[12rem]"
                    : "w-[18rem] h-[18rem]"
                  : isMobile
                  ? "mb-[0.8rem]"
                  : "mb-[2rem]"
              }
              imageClassName={`flex-shrink-0 ${
                isOneColumnStyle ? (isMobile ? "mr-[1.2rem]" : "mr-[2rem]") : ""
              }`}
              wrapperClassName={
                isOneColumnStyle
                  ? "flex items-center rounded-[1rem] border-[1px] border-gray-2 p-[1.6rem] bg-gray-1"
                  : isMobile
                  ? "bg-gray-1 rounded-[1rem] border-[1px] border-gray-2 p-[0.6rem] !h-full"
                  : "bg-gray-1 rounded-[1rem] border-[1px] border-gray-2 p-[1.5rem] !h-full"
              }
              informationWrapperClassName={isOneColumnStyle ? "!w-auto" : ""}
              goodsNameStyle={
                isMobile
                  ? "text-body-6 font-medium"
                  : "text-heading-6 font-extrabold"
              }
              priceStyle={
                isOneColumnStyle
                  ? undefined
                  : isMobile
                  ? "text-heading-6 font-extrabold"
                  : "text-heading-4 font-extrabold"
              }
              showBrand
              showFixedPrice
              showDiscountPercentage
              showRating
              showPickBadge
              pickBadgeType="circle"
              pickBadgeOnImage
              NextImage={NextImage}
              isMobile={isMobile}
            />
          </Link>
        );
      })}

      {isOneColumnStyle && (
        <div className={`mt-[2rem] ${isMobile ? "" : "px-[4rem]"}`}>
          {showNosearchTwoLines && nosearchTwoLines !== "" && (
            <p
              className={`w-full whitespace-pre-wrap font-extrabold leading-[150%] ${
                isMobile ? "text-[1.7rem]" : "text-heading-5"
              }`}
            >
              {nosearchTwoLines}
            </p>
          )}

          {showContent && editorContent && (
            <TextElement
              editorContent={editorContent}
              className="p-0 pt-[1.2rem]"
            />
          )}
        </div>
      )}
    </div>
  );
};

export default StoreProduct;