import { currencySymbols } from 'config'

import { T9n } from 'features/T9n'

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

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

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