import React from 'react'
import { useLexicsStore } from 'features/LexicsStore'

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

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

export const Price = ({
  amount,
  currency = '₽',
  perPeriod = 'month',
}: Props) => {
  const { translate } = useLexicsStore()
  const perPeriodTranslated = translate(perPeriod)

  return (
    <PriceWrapper>
      <PriceAmount>{amount}</PriceAmount>
      <PriceDetails>
        {currency} / {perPeriodTranslated}
      </PriceDetails>
    </PriceWrapper>
  )
}