import React from 'react'
import { t } from '$themelocalization'
import './CartUnitInfo.scss'

const CartUnitInfo = ({ unit, totalQuantity, numRecipients, quantityPerRecipient }) => {
  const hasMailing = numRecipients && numRecipients > 1 && quantityPerRecipient
  const unitLabel = totalQuantity > 1 ? unit.plural : unit.singular

  if (unit.packSingular) {
    return (
      <div className="cart-quantity-unit-info">
        <div className="unit-info-line">{t('Cart.Item.Total')}: {totalQuantity} {totalQuantity > 1 ? unit.packPlural : unit.packSingular}</div>
        <div className="unit-info-line">({unit.quantity} {unit.quantity > 1 ? unit.plural : unit.singular} / {unit.packSingular})</div>
      </div>
    )
  }

  if (hasMailing) {
    return (
      <div className="cart-quantity-unit-info">
        <div className="unit-info-line">{t('Cart.Item.Recipients')}: {numRecipients}</div>
        <div className="unit-info-line">{t('Cart.Item.QuantityPerRecipient')}: {quantityPerRecipient} {quantityPerRecipient > 1 ? unit.plural : unit.singular}</div>
        <div className="unit-info-line">{t('Cart.Item.Total')}: {totalQuantity} {unitLabel}</div>
      </div>
    )
  }

  return (
    <div className="cart-quantity-unit-info">
      <div className="unit-info-line">{t('Cart.Item.Total')}: {totalQuantity} {unitLabel}</div>
    </div>
  )
}

export default CartUnitInfo
