import React from 'react';
import { DealType } from '@/types';
import { formatCurrency } from '@/lib/formatPrice';
import Image from 'next/image';

type ProductItemProps = {
  item: DealType;
};

const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
  const { product_info } = item;
  const offers = product_info.specialOffer?.all ?? [];

  return (
    <div className="product-item">
      <a href={product_info.productUrl} className="product-image relative">
        {product_info.productImage.large ? (
          <Image
            src={product_info.productImage.large}
            width="164"
            height="164"
            alt={product_info.productName}
            className="lazy"
          />
        ) : (
          <Image
            src="/static/assets/nguyencong_2023/images/not-image.png"
            width="164"
            height="164"
            alt={product_info.productName}
            className="lazy"
          />
        )}
        <span className="p-type-holder">
          {product_info.productType.isHot === 1 && <i className="p-icon-type p-icon-hot"></i>}
          {product_info.productType.isNew === 1 && <i className="p-icon-type p-icon-new"></i>}
        </span>
      </a>
      <div className="product-info">
        <a href={product_info.productUrl}>
          <h3 className="product-title line-clamp-3">{product_info.productName}</h3>
        </a>
        <div className="product-martket-main flex items-center">
          {product_info.marketPrice > 0 ? (
            <p className="product-market-price">{product_info.marketPrice.toLocaleString()} ₫</p>
          ) : (
            <p className="product-market-price">
              {product_info.sale_rules.normal_price.toLocaleString()} ₫
            </p>
          )}
          <div className="product-percent-price">-{product_info.price_off || 0}%</div>
        </div>
        <div className="product-price-main font-bold">
          {item.price > '0' ? `${formatCurrency(product_info.price)}đ` : 'Liên hệ'}
        </div>
        <div className="p-quantity-sale">
          <i className="sprite sprite-fire-deal"></i>
          <div className="bg-gradient"></div>
          <p className="js-line-deal-left"></p>
          <span>
            Còn {Number(item.quantity) - Number(item.sale_quantity)}/{Number(item.quantity)} sản
            phẩm
          </span>
        </div>
        {offers.length > 0 && (
          <div
            className="product-offer line-clamp-2"
            dangerouslySetInnerHTML={{
              __html: product_info.specialOffer!.all![0].title,
            }}
          />
        )}
      </div>
    </div>
  );
};

export default ProductItem;