import {cn} from '../../lib/utils'
import {formatMoney} from '../../utils/formatMoney'

/**
 * A component for displaying product pricing with support for discounts and custom styling.
 * @publicDocs
 */
export interface ProductVariantPriceProps {
  amount: number | string
  currencyCode?: string
  compareAtPriceAmount?: number | string
  compareAtPriceCurrencyCode?: string
  currentPriceClassName?: string
  originalPriceClassName?: string
  className?: string
}

export function ProductVariantPrice({
  amount,
  currencyCode,
  compareAtPriceAmount,
  compareAtPriceCurrencyCode,
  currentPriceClassName,
  originalPriceClassName,
  className,
}: ProductVariantPriceProps) {
  if (!amount || !currencyCode) {
    return null
  }

  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount

  const amountStr = String(amount)
  const compareAtPriceAmountStr = compareAtPriceAmount
    ? String(compareAtPriceAmount)
    : undefined

  return (
    <div className={cn('flex items-center gap-2', className)}>
      {hasDiscount ? (
        <>
          <span
            className={cn(
              'text-sm font-semibold text-gray-900',
              currentPriceClassName
            )}
          >
            {formatMoney(amountStr, currencyCode)}
          </span>
          <span
            className={cn(
              'text-sm text-gray-500 line-through',
              originalPriceClassName
            )}
          >
            {formatMoney(
              compareAtPriceAmountStr!,
              compareAtPriceCurrencyCode || currencyCode
            )}
          </span>
        </>
      ) : (
        <span
          className={cn(
            'text-sm font-semibold text-gray-900',
            currentPriceClassName
          )}
        >
          {formatMoney(amountStr, currencyCode)}
        </span>
      )}
    </div>
  )
}