import * as React from 'react';
import classNames from 'classnames';

import type { SafeExtract, Size, Variant } from '../../types';

import { iconClassName } from './iconClassName';
import type { IconName } from './IconName';

export interface IconProps {
  /**
   * Icon to be displayed.
   */
  icon: IconName;
  /**
   * Color variant of the icon.
   */
  variant?: 'default' | SafeExtract<Variant, 'primary' | 'secondary' | 'tertiary'>;
  /**
   * Size of the icon.
   * @default 'md'
   */
  size?: SafeExtract<Size, 'sm' | 'md' | 'lg'>;
  /**
   * Title attribute of the icon.
   */
  title?: React.HTMLAttributes<HTMLSpanElement>['title'];
}

export const Icon = React.forwardRef<HTMLSpanElement, IconProps>(function Icon(
  { icon, variant = 'default', size = 'md', title, ...rest }: IconProps,
  forwardedRef
) {
  return (
    <span
      {...rest}
      aria-hidden
      ref={forwardedRef}
      className={classNames(iconClassName({ icon, variant, size }))}
      title={title}
    />
  );
});