import React from 'react'
import { wording } from 'src/words'
import { CardState } from 'organisms/ExpandableCard'
import { DeliveryInstructionProps } from './typings'
import { StyledToggleItem, StyledCommentBox } from './styled'

function defaultRenderToggleButton(
  props: DeliveryInstructionProps,
  state: CardState
) {
  const { handleToggle } = state
  return (
    <StyledToggleItem
      iconType={'checkbox'}
      label={wording.deliveryInstruction}
      onToggle={handleToggle}
      bgColor={'#179ed5'}
    />
  )
}

function defaultRenderExpandedView(
  props: DeliveryInstructionProps,
  state: CardState
) {
  return <StyledCommentBox {...props} />
}

export { defaultRenderToggleButton, defaultRenderExpandedView }