import React from 'react'
import { Empty } from 'atoms/Empty'
import { StyledInput } from './styled'
import { SubscriptionEndsProps } from './typings'

function defaultRenderDate(props: SubscriptionEndsProps) {
  return <StyledInput type="date" />
}

function defaultRenderBox(props: SubscriptionEndsProps) {
  const {
    renderText,
    renderIcon,
    renderDate,
    isDate,
    ...remainingProps
  } = props
  const textView = renderText(remainingProps)
  const iconView = renderIcon(remainingProps)
  const dateView = isDate ? renderDate(remainingProps) : <Empty />
  return (
    <React.Fragment>
      {iconView}
      {textView}
      {dateView}
    </React.Fragment>
  )
}

export {
  defaultRenderDate,
  defaultRenderBox
}