import { currencySymbols } from 'config'

import { T9n } from 'features/T9n'

import {
  Prefix,
  PriceDetails,
  PriceWrapper,
  Currency,
  Period,
} from '../../styled'
import { PriceAmount } from './styled'

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

export const BrazilianPrice = ({
  amount,
  className,
  currency = currencySymbols.BRL,
  isFrom,
  perPeriod,
}: Props) => (
  <PriceWrapper className={className}>
    {
      isFrom
        ? (
          <Prefix>
            <T9n t='from_price' />
          </Prefix>
        )
        : ''
    }
    <PriceDetails>
      <Currency>{currency}</Currency>
      <PriceAmount>{amount.toFixed(2).replace('.', ',')}</PriceAmount>
      {
        perPeriod && (
          <Period>
            / <T9n t={perPeriod} />
          </Period>
        )
      }
    </PriceDetails>
  </PriceWrapper>
)
