import cc from 'classcat';
import { Badge } from 'components/common';

export const padMonth = (number: number) => (number < 10 ? '0' : '') + number;

interface PaymentMethodProps {
  brand: string;
  last4: string;
  expYear: string;
  expMonth: string;
  isDefault?: boolean;
  error?: boolean;
  style?: React.CSSProperties;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  onDelete?: React.MouseEventHandler<HTMLDivElement>;
}

export const PaymentMethod = ({
  brand,
  last4,
  expYear,
  expMonth,
  isDefault,
  error,
  style,
  onClick,
  onDelete,
}: PaymentMethodProps) => {
  return (
    <div
      className={cc([
        'w100 fz14 padding4 rounded3 flex alignCenter justifyBetween relative overflowHidden bg-grayA01',
        { 'c-red': error },
      ])}
      style={style}
      onClick={onClick}
    >
      <div className="w100 tal bold">
        <span style={{ letterSpacing: 2 }}>•••• •••• ••••</span> {last4}
      </div>
      <span className="ttu nowrap">{brand}</span>
      <div className="w100 tar spacing4">
        {isDefault && (
          <Badge className="fz12" bold uppercase>
            Default
          </Badge>
        )}
        <span className="nowrap" title="Expires">
          {padMonth(+expMonth)} / {expYear}
        </span>
        {onDelete && (
          <span className="cup" onClick={onDelete}>
            ✕
          </span>
        )}
      </div>
    </div>
  );
};