import type { MatchPackage } from 'features/BuyMatchPopup/types'
import { SubscriptionType } from 'features/BuyMatchPopup/types'

import { T9n } from 'features/T9n'
import { Price } from 'features/Price'

import { usePackage } from '../RegularPackage/usePackage'
import {
  Wrapper,
  Description,
  PriceBlock,
  PriceTextWrapper,
  PriceTextTop,
  PriceTextBottom,
} from './styled'

type Props = {
  matchPackage: MatchPackage,
}

export const SinglePackage = ({ matchPackage }: Props) => {
  const {
    firstDescription,
    priceTextBottomLexic,
    priceTextTopLexic,
  } = usePackage(matchPackage)

  return (
    <Wrapper>
      <Description>
        <T9n t={matchPackage.originalObject.sub.lexic1} />
      </Description>
      <Description>
        {firstDescription}
      </Description>
      <Description>
        <T9n t={matchPackage.originalObject.sub.lexic3} />
      </Description>
      <PriceBlock>
        <PriceTextWrapper>
          <PriceTextTop t={priceTextTopLexic} />
          <PriceTextBottom t={priceTextBottomLexic} />
        </PriceTextWrapper>
        <Price
          amount={matchPackage.originalObject.price}
          currency={matchPackage.currency}
          perPeriod={`per_${SubscriptionType.Month}`}
        />
      </PriceBlock>
    </Wrapper>
  )
}