import { ReactNode } from 'react'

export interface ImageRenderProp {
  (props: ImageProps): ReactNode
}

export interface BaseImageProps {
  // class name of the image container / wrapper
  className?: string

  // url of the image
  src: string

  // alt of the image by default its 'image'
  alt?: string

  // width and height of the image / container
  width?: number | string
  height?: number | string

  // used to align the image tag with center aligned inside the wrapper and with aspect ratio
  doAutoAlign?: boolean

  // usemap?: any

  // used to add children inside the wrapper
  children?: ReactNode

  // renders only the image tag
  renderImage?: ImageRenderProp
}

export interface ImageProps extends BaseImageProps {
  // used to disable the container
  nowrap?: boolean

  // used to render the src as background image means src will be rendered via css
  isBackground?: boolean

  /**
   * Reusable renderProps
   */
  // renders the wrapper of the image tag
  renderWrap?: ImageRenderProp

  // renders the image tag as background
  renderImageAsBackground?: ImageRenderProp
}

export interface ImageStates {
  // state maintainance for image loading
  isLoaded: boolean
}