import React, { ReactNode } from 'react'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { PaymentActionTile } from '../Item/PaymentActionTile'
import { PaymentItemProps } from './typings'
import { StyledToggleContentWrapper } from './styled'

function defaultRenderText(props: PaymentItemProps) {
  const { onClick, ...remainingProps } = props
  const handleChange = onClick

  return <PaymentActionTile onChange={handleChange} {...remainingProps} />
}

function defaultRenderIcon(props: PaymentItemProps) {
  return <Empty />
}

function defaultRenderContentWrapper(toggleList: ReactNode) {
  return <StyledToggleContentWrapper>{toggleList}</StyledToggleContentWrapper>
}

export { defaultRenderIcon, defaultRenderText, defaultRenderContentWrapper }