import React, { CSSProperties, forwardRef } from 'react';
import classNames from 'classnames';
import type { LucideIcon } from 'lucide-react';
import { ICON_PIXEL_SIZES } from './iconSizes';
import type { IconSize } from './types';
import * as iconStyles from './style.css';

export type IconProps = {
  src: LucideIcon;
  size?: IconSize;
  filled?: boolean;
  className?: string;
  style?: CSSProperties;
  fill?: string;
} & Omit<React.SVGAttributes<SVGSVGElement>, 'fill'>;

export const Icon = forwardRef<SVGSVGElement, IconProps>(
  ({ className, size = '400', filled = false, src: LucideIconComponent, style, fill, ...props }, ref) => {
    const pixelSize = ICON_PIXEL_SIZES[size];

    return (
      <LucideIconComponent
        ref={ref}
        className={classNames(iconStyles.Icon({ size }), className)}
        style={
          size === 'Inherit'
            ? { width: '1em', height: '1em', ...style }
            : pixelSize
              ? { width: pixelSize, height: pixelSize, ...style }
              : style
        }
        strokeWidth={2}
        fill={fill ?? (filled ? 'currentColor' : 'none')}
        aria-hidden={props['aria-hidden'] ?? props['aria-label'] ? undefined : true}
        {...props}
      />
    );
  }
);

Icon.displayName = 'Icon';