import type { Card } from 'requests/getCardsList'

import { T9n } from 'features/T9n'
import { Arrows } from 'features/ArrowLoader/styled'

import { InlineButton } from '../../styled'
import { CardNumberWrapper, CustomRadio } from './styled'

type Props = {
  card: Card,
  checked?: boolean,
  loader?: boolean,
  onChange: (cardId: string) => void,
  onDelete: (cardId: string) => void,
}

export const BankCard = ({
  card,
  checked,
  loader,
  onChange,
  onDelete,
}: Props) => (
  <CardNumberWrapper>
    <CustomRadio
      label={`${card.brand} •••• ${card.last4}`}
      checked={checked}
      onChange={() => onChange(card.id)}
    />
    <InlineButton
      disabled={loader}
      onClick={() => onDelete(card.id)}
    >
      {loader
        ? <Arrows backgroundSize='20px 20px' />
        : <T9n t='remove' />}
    </InlineButton>
  </CardNumberWrapper>
)