import type { HTMLAttributes } from 'react';
import type { WrapperType } from 'react-svg';

import type { SxProps } from '@mui/material/styles';
import type { Theme } from '../@styles/theme-provider';

export interface CustomIconProps extends HTMLAttributes<WrapperType> {
  /**
   * Color of the icon (will replace the fill colors of the SVG path, use an empty string to keep the original icon colors).
   */
  color?: 'inherit' | string;
  /**
   * Custom icon size (in pixels, overrides the `size`).
   */
  customSize?: 0 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | 104;
  /**
   * The amount of rotation, in degrees, created by the transform's rotate().
   * If positive, the movement will be clockwise; if negative, it will be counter-clockwise.
   */
  rotateDeg?: number;
  /**
   * Set the size of the icon (defaults to `small`).
   */
  size?: 'small' | 'medium' | 'large' | 'xlarge';
  /**
   * The SVG URL.
   */
  src: string;
  /**
   * Wrapper HTML tag.
   * @default 'div'
   */
  wrapper?: 'div' | 'span';
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme>;
}