import React from 'react'

import { Price } from 'features/Register/components/Price'
import { Radio } from 'features/Common/Radio'
import { Checkbox } from 'features/Common/Checkbox'

import {
  CheckboxWrapper,
  UserAccountSubscriptionWrapper,
  UserAccountBoldTextWrapper,
  UserAccountNormalTextWrapper,
} from './styled'
import { PriceWrapper } from '../CardNumber/styled'

type Props = {
  amount: number,
  checked?: boolean,
  inputType?: string,
  label?: string,
  noMarginBottom?: boolean,
  noMarginTop?: boolean,
  packageAction?: string,
  packageName?: string,
}

export const UserAccountSubscription = ({
  amount,
  checked,
  inputType,
  label,
  noMarginBottom,
  noMarginTop,
  packageAction,
  packageName,
}: Props) => (
  <UserAccountSubscriptionWrapper
    noMarginTop={noMarginTop}
    noMarginBottom={noMarginBottom}
  >
    {inputType === 'radio' ? (
      <Radio
        checked={checked}
        onChange={() => {}}
      />
    ) : (
      <CheckboxWrapper>
        <Checkbox
          checked={checked}
          onChange={() => {}}
          label={label}
        />
      </CheckboxWrapper>
    )}
    {packageName && <UserAccountBoldTextWrapper>{packageName}</UserAccountBoldTextWrapper>}
    {packageAction && <UserAccountNormalTextWrapper>{packageAction}</UserAccountNormalTextWrapper>}
    <PriceWrapper>
      <Price amount={amount} />
    </PriceWrapper>
  </UserAccountSubscriptionWrapper>
)