nguyencongpc_nextjs/src/components/product/ProductDetail/BoxInfoRight/index.tsx

import type { ProductDetailData } from '@/types';
import Link from 'next/link';

import { BoxPrice } from './BoxPrice';

export const BoxInfoRight = (item: ProductDetailData) => {
  return (
    <>
      <h1 className="product-name color-black line-clamp-3">{item.product_info.productName}</h1>

      <div className="list-basic-product-info flex flex-wrap items-center">
        <div className="item-basic">
          Mã SP: <span className="color-primary">{item.product_info.productSKU}</span>
        </div>
        <div className="item-basic">
          Đánh giá: <span className="color-primary">{item.product_info.review.summary.total}</span>
        </div>
        <div className="item-basic">
          Bình luận:{' '}
          <span className="color-primary">{item.product_info.comment.summary.total}</span>
        </div>
        <div className="item-basic">
          Lượt xem: <span className="color-primary">{item.product_info.visit}</span>
        </div>

        {item.product_info.extend.buy_count?.length > 0 && (
          <div className="item-basic last-item-basic position-relative">
            Đã bán: <span className="color-primary">{item.product_info.extend.buy_count}</span>
          </div>
        )}
      </div>

      {/*  tình trạng */}
      <div className="list-basic-product-info flex flex-wrap items-center gap-6">
        <div className="item-basic">
          Bảo hành: <span className="color-red">{item.product_info.warranty}</span>
        </div>

        {item.product_info.quantity > '0' && (
          <div className="item-basic last-item-basic position-relative">
            Tình trạng: <span className="color-green">Còn hàng</span>
          </div>
        )}
      </div>

      {/* giá */}

      <BoxPrice {...item} />

      {item.product_info.specialOffer.all.length > 0 && (
        <div className="box-offer-detail border-radius-10">
          <div className="title-offer-detail flex items-center">
            <i className="sprite sprite-gift-detail"></i>
            <p className="font-weight-600">Khuyến mãi</p>
          </div>
          <div className="list-info-offter">
            {item.product_info.specialOffer.all.map((_item, idx) => (
              <div key={idx} className="item-offer">
                <i className="icon"></i>
                <div dangerouslySetInnerHTML={{ __html: _item.title }} />
              </div>
            ))}
          </div>
        </div>
      )}

      {/*  mua hàng */}
      {(item.product_info.quantity > '0' || item.product_info.price > '0') && (
        <>
          <div className="product-buy-quantity flex items-center">
            <p className="title-quantity">Số lượng:</p>
            <div className="cart-quantity-select flex items-center justify-center">
              <p className="js-quantity-change" data-value="-1">
                {' '}
                −{' '}
              </p>
              <input
                type="text"
                className="js-buy-quantity js-quantity-change bk-product-qty font-bold"
                defaultValue={1}
              />
              <p className="js-quantity-change" data-value="1">
                {' '}
                +{' '}
              </p>
            </div>
            <Link
              href="#"
              onClick={() => addProductToCart(item.product_info.id, 0, '')}
              className="addCart flex flex-wrap items-center justify-center gap-3"
            >
              <i className="sprite sprite-cart-detail"></i>
              <p className="title-cart">Thêm vào giỏ hàng</p>
            </Link>
            <input type="hidden" className="js-buy-quantity-temp" value="1" />
          </div>

          <div id="detail-buy-ads" className="detail-buy grid grid-cols-2 gap-2">
            <Link
              href="#"
              className="detail-buy-now col-span-2"
              onClick={() => buyNow(item.product_info.id, 0, '')}
            >
              <span>ĐẶT MUA NGAY</span>
              Giao hàng tận nơi nhanh chóng
            </Link>

            <Link
              href="#"
              className="detail-add-cart"
              onClick={() => buyPayInstall(item.product_info.id, 0, '')}
            >
              <span>TRẢ GÓP QUA HỒ SƠ</span>
              Chỉ từ 2.665.000₫/ tháng
            </Link>

            <Link
              href="#"
              className="detail-add-cart"
              onClick={() => buyAlepay(item.product_info.id, 0, '')}
            >
              <span>TRẢ GÓP QUA THẺ</span>
              Chỉ từ 1.332.500₫/ tháng
            </Link>
          </div>
        </>
      )}
    </>
  );
};