import style from '../styles/item-promo.module.css'

import Image from 'next/image'
import React from 'react'

import { CartProduct } from '~/types/cart'

type Props = {
  product: CartProduct
}

const CartItemPromo = ({ 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} className={style.image} />}
      </div>

      <div className={style.details}>
        <div className={style.name}>{product.display_name}</div>
        <div className='flex w-full'>
          <div className="flex flex-col">
            <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>
      </div>

    </div>
  )
}

export default CartItemPromo