import { currencySymbols } from 'config'

import { T9n } from 'features/T9n'

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

type Props = {
  amount: number,
  className?: string,
  currency?: string,
  perPeriod?: string,
}

export const Price = ({
  amount,
  className,
  currency = currencySymbols.RUB,
  perPeriod = 'month',
}: Props) => (
  <PriceWrapper className={className}>
    <PriceAmount>{amount}</PriceAmount>
    <PriceDetails>
      {currency} / <T9n t={perPeriod} />
    </PriceDetails>
  </PriceWrapper>
)