import Image from 'next/image'
import React from 'react'
import { CartProduct } from '~/common/types/cart'
import style from '../styles/ProductPromo.module.css'

type Props = {
  product: CartProduct
}

const ProductPromo = ({ product }: Props) => {
  return (
    <div key={product.id} className={style.wrapper}>
      <div className={style.imageWrapper}>
        {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} />}
      </div>

      <div className={style.details}>
        <div className={style.name}>{product.display_name}</div>
        <div className={style.code}>{product.code}</div>
        <div>
          <span className={style.weightLabel}>Berat Barang: </span>
          <span>{product.package_weight} Kg</span>
        </div>
      </div>

      <div className={style.quantity}>
        {product.qty}
      </div>
    </div>
  )
}

export default ProductPromo