import React from 'react'

import { Radio } from 'features/Common'

import { Price } from '../Price'
import {
  SubscriptionWrapper,
  SubscriptionTitle,
  Row,
} from '../SubscriptionsStep/styled'

type TMainSubscription = {
  price: number,
  title: string,
}

export const MainSubscription = ({ price, title }: TMainSubscription) => (
  <SubscriptionWrapper>
    <Row>
      <Radio name='mainSubscription' id={title} />
      <SubscriptionTitle>{title}</SubscriptionTitle>
    </Row>
    <Row left={70} bottom={100}>
      <Price amount={price} />
    </Row>
  </SubscriptionWrapper>
)