import { ReactNode } from 'react'

type Identifier = string | number | symbol

export interface ToggleItemRenderProp extends Function {
  (props: ToggleItemProps): ReactNode
}

export interface OnClickEvent extends Function {
  (props: ToggleItemProps): any
}

export interface ToggleItemProps {
  className?: string
  children?: ReactNode
  borderColor?: string
  bgColor?: string
  tickColor?: string
  selectedDataQa?: string
  unselectedDataQa?: string
  // commonstate
  isSelected?: boolean
  isDisabled?: boolean

  // displayed in ui
  label: string | object

  // used for non-ui
  value: string

  // for identifying
  identifier?: Identifier

  // where the onclcik event will be called
  onClick?: OnClickEvent

  /**
   * Render Props
   */
  renderIcon?: ToggleItemRenderProp
  renderText?: ToggleItemRenderProp
  renderBox?: ToggleItemRenderProp
  renderWrap?: ToggleItemRenderProp

  /**
   * Toggle breedType
   */
  isRadio?: boolean
  isCheckBox?: boolean
  role?: string
}