import { ReactNode, ReactEventHandler } from 'react'
import { ClickHandler } from 'organisms/ExpandableCard'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'

export interface PaymentCardRenderProp extends Function {
  (props: PaymentCardProps): ReactNode
}

export interface HandleRemoveCardEvent extends Function {
  (event: Event): void
}

export interface PaymentCardProps {
  className?: string
  children?: ReactNode
  noWrap?: boolean
  state?: AnimatedCardState
  // handlers
  handleToggleClick?: ClickHandler
  handleRemoveCard?: HandleRemoveCardEvent
  onChange?: ReactEventHandler<HTMLButtonElement>

  // renderProps
  renderRemoveButton?: PaymentCardRenderProp
  renderTogglePaymentMethod?: PaymentCardRenderProp
  renderFooter?: PaymentCardRenderProp
  renderButton?: PaymentCardRenderProp
  renderBalance?: PaymentCardRenderProp
  renderCardDetail?: PaymentCardRenderProp
  renderIcon?: PaymentCardRenderProp
  renderHeader?: PaymentCardRenderProp
  renderWrapper?: PaymentCardRenderProp
}