import { ReactNode } from 'react'

/**
 * TYPES
 */
export type SocialIconDataType = Array<InformationProps>

export interface SocialItemRenderProp extends Function {
  (
    item: InformationProps,
    index?: number,
    props?: SocialIconListProps
  ): ReactNode
}

export interface SocialIconListRenderProp extends Function {
  (props: SocialIconListProps): ReactNode
}

export interface InformationProps {
  // name of the icon to be render
  label?: string
  // url of the icon link
  url?: string
  // icon color
  color?: string
  // @todo remove
  // background color of an icon
  bgcolor?: string
  breed?: string
  dataQa?: string
  // The icon children inside the renderIconWrapper
  children?: ReactNode
}

export interface SocialIconListProps {
  className?: string

  // the entire children of the social icons wrapper
  children?: ReactNode

  // an array of icon list with its needed information
  iconsList?: SocialIconDataType

  // renders each of an icon presents in icon list are wrapped with li tag and its children
  renderIcon?: SocialItemRenderProp

  // where all the icons loop will be rendered here
  renderIconList?: SocialIconListRenderProp

  // it's the ul wrapper of whole icon list
  renderWrapper?: SocialIconListRenderProp

  renderIconWrapper?: SocialItemRenderProp
}