import {
  calcDiscountPercent,
  formatIrtPrice,
  hasStoreItemDiscount,
} from '../utils/irtPrice'
import styles from './StoreItemPrice.module.css'

interface StoreItemPriceProps {
  price: number | null
  discountedPrice?: number | null
}

export function StoreItemPrice({ price, discountedPrice = null }: StoreItemPriceProps) {
  if (hasStoreItemDiscount(price, discountedPrice)) {
    const percent = calcDiscountPercent(price!, discountedPrice!)
    return (
      <div className={styles.discountWrap}>
        <span className={styles.originalPrice}>{formatIrtPrice(price)}</span>
        <div className={styles.saleRow}>
          <span className={styles.salePrice}>{formatIrtPrice(discountedPrice)}</span>
          <span className={styles.percent}>-{percent}%</span>
        </div>
      </div>
    )
  }

  return <span className={styles.priceChip}>{formatIrtPrice(price)}</span>
}
