import { T9n } from 'features/T9n'
import type { ObjectWithName } from 'features/Name'
import { Name } from 'features/Name'
import { Price } from 'features/Price'

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

type Props = {
  amount: number,
  deleteSubscription?: () => void,
  label?: ObjectWithName,
  noMarginBottom?: boolean,
  noMarginTop?: boolean,
  packageAction?: string,
  packageName?: string,
}

export const UserAccountSubscription = ({
  amount,
  deleteSubscription,
  label,
  noMarginBottom,
  noMarginTop,
  packageAction,
  packageName,
}: Props) => (
  <UserAccountSubscriptionWrapper
    noMarginTop={noMarginTop}
    noMarginBottom={noMarginBottom}
  >
    <UserAccountText>
      <Name nameObj={label || {}} />
    </UserAccountText>
    {packageName
      && (
        <UserAccountBoldTextWrapper>
          <T9n t={packageName} />
        </UserAccountBoldTextWrapper>
      )}
    {packageAction
      && <UserAccountNormalTextWrapper>{packageAction}</UserAccountNormalTextWrapper>}
    <PriceWrapper>
      <Price amount={amount} />
    </PriceWrapper>
    {deleteSubscription && (
      <UserAccountDeleteButton type='button' onClick={deleteSubscription}>
        <T9n t='delete' />
      </UserAccountDeleteButton>
    )}
  </UserAccountSubscriptionWrapper>
)