import React from "react";
import PickLabel from "../../PickLabel";
import NsImage from "../../shared/ns-image";
import Text from "../../UI/Text";
import { IProductData } from "./ProductList.types";

const ProductItem = ({ data }: { data: IProductData }) => {
  const {
    parentCategory,
    productCategory,
    modelName,
    goodsName,
    brandName,
    imageUrl,
    ImageWrapper,
    price,
    pickType = "none",
  } = data;
  return (
    <a
      href={`/product/${parentCategory}/${productCategory}/detail/${modelName}?`}
    >
      <div>
        <div className="relative h-[9rem] w-[9rem] pc:h-[11rem] pc:w-[11rem]">
          <div className="relative h-full w-full overflow-hidden rounded-[20px] border-[1px] border-gray-2">
            <NsImage imageUrl={imageUrl} ImageWrapper={ImageWrapper} />
          </div>
          <PickLabel
            pickType={pickType}
            type="circleLabel"
            labelStyle="absolute top-[0.6rem] right-[0.6rem] w-[3rem] h-[3rem] pc:w-[3.6rem] pc:h-[3.6rem]"
          />
        </div>
      </div>
      <div className="pc:[11rem] mt-[0.4rem] w-[9rem]">
        <Text type="D3" className="pc:text-detail-4 text-gray-7 line-clamp-1">
          {brandName}
        </Text>
        <Text type="D4" className="text-gray-10 line-clamp-1 pc:text-body-10">
          {goodsName}
        </Text>
        <Text type="D4" className="text-gray-10 line-clamp-1 pc:text-body-10">
          {modelName}
        </Text>
        <Text type="B8" className="text-gray-10 line-clamp-1 pc:text-body-5">
          {price}
        </Text>
      </div>
    </a>
  );
};

export default ProductItem;