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

import Image from 'next/image'
import Link from 'next/link'
import { createSlug } from '~/libs/slug'

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

type Props = {
  product: CartProduct
}

const CartItemPromo = ({ product }: Props) => {
  return (
    <div key={product.id} className={style.wrapper}>
      <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.imageWrapper}>
        {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
      </Link>

      <div className={style.details}>
        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.name}>
          {product.display_name}
        </Link>

        <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