import { currencySymbols } from 'config'

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

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

export const Price = ({
  amount,
  className,
  currency = currencySymbols.RUB,
  perPeriod,
}: Props) => (
  <PriceWrapper className={className}>
    <PriceAmount>{amount}</PriceAmount>
    <PriceDetails>
      <Currency>{currency}</Currency>
      {
        perPeriod && (
          <Period>
            <Divider /><PerPeriod t={perPeriod} />
          </Period>
        )
      }
    </PriceDetails>
  </PriceWrapper>
)