import React from 'react'

import Svg from '../svg'
import { PropsOf } from '../utils'
import { BaseIcon } from './baseIcons/types'

/** Object defining a custom icon. */
export type IconDefinition = {
  /** Icon details including height, width and 'd' attribute. */
  details: IconDetails
  /** Name of the icon used internally. */
  name: string
  /** Props object or array of objects passed to the path elements. */
  pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[]
  /** Props object passed to the svg element. */
  svgProps?: PropsOf<typeof Svg>
}

/** Icon definition following Font Awesome standard. */
export type IconDetails = [
  number, // width
  number, // height
  string[], // ligatures
  string, // unicode
  string | string[], // svgPathData
]

/** Base icons collection, which can be extended by the consumer. */
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface VuiIcons extends Record<BaseIcon, IconDefinition> {}

export type VuiIcon = keyof VuiIcons
