import {
  type ComponentProps,
  type ComponentType,
  type CSSProperties,
} from 'react'

import type iconsList from './iconsList'

export type IconSizes =
  | '8px'
  | '12px'
  | '16px'
  | '20px'
  | '24px'
  | '32px'
  | '40px'
  | '48px'
  | '56px'
  | '64px'
  | '72px'

export type IconColorList =
  | 'purple'
  | 'dark-purple'
  | 'dark-red'
  | 'dark-blue'
  | 'dark-green'
  | 'dark-yellow'
  | 'medium-purple'
  | 'white'
  | 'teal'
  | 'gray'
  | 'black'

export type IconStringList = keyof typeof iconsList

/** Minimal contract an icon component must satisfy to work with `<Icon>`. */
export type IconComponentProps = Pick<
  ComponentProps<'svg'>,
  'width' | 'height' | 'style'
>

export type IconProps = {
  /** Built-in icon name, or an icon component that accepts at least width/height/style. */
  icon: IconStringList | ComponentType<IconComponentProps>
  /** Optional prop to add a test id to the Icon for QA testing */
  qaTestId?: string
  /** Optional class */
  className?: string
  /** Optionally change the color - the default value is 'purple' */
  color?: IconColorList
  /** Optionally use one of the standard sizes for the Icon - the default value is 20px */
  iconSize?: IconSizes
  /** Note: Use sparingly — this will override the default styles. */
  style?: CSSProperties
}