import { currencySymbols } from 'config'

import { useMemo } from 'react'
import { BasePrice } from './components/BasePrice'
import { BrazilianPrice } from './components/BrazilianPrice'

export type PriceProps = {
  amount: number,
  className?: string,
  currency?: string,
  isFrom?: boolean,
  perPeriod?: string | null,
}

export const Price: React.FC<PriceProps> = ({
  amount,
  className,
  currency,
  isFrom,
  perPeriod,
}) => {
  const priceContent = useMemo(() => {
    switch (currency) {
      case currencySymbols.BRL:
        return (
          <BrazilianPrice
            amount={amount}
            className={className}
            currency={currency}
            isFrom={isFrom}
            perPeriod={perPeriod}
          />
        )
      default:
        return (
          <BasePrice
            amount={amount}
            className={className}
            currency={currency}
            isFrom={isFrom}
            perPeriod={perPeriod}
          />
        )
    }
  }, [amount, className, currency, isFrom, perPeriod])

  return priceContent
}
