import {
  CheckCircleFilledIcon,
  CheckCircleIcon,
  ExclamationCircleFilledIcon,
  ExclamationCircleIcon,
  InfoFilledIcon,
  InfoIcon,
  XCircleFilledIcon,
  CloseCircleIcon,
} from '@trail-ui/icons';
import { clsx } from '@trail-ui/shared-utils';

export interface AlertIconProps extends Omit<React.HTMLAttributes<SVGSVGElement>, 'color'> {
  type?: 'info' | 'green' | 'yellow' | 'error';
  filled?: boolean;
}

const ICONS = {
  info: { outline: InfoIcon, filled: InfoFilledIcon },
  yellow: { outline: ExclamationCircleIcon, filled: ExclamationCircleFilledIcon },
  green: { outline: CheckCircleIcon, filled: CheckCircleFilledIcon },
  error: { outline: CloseCircleIcon, filled: XCircleFilledIcon },
};

const AlertIcon = (props: AlertIconProps) => {
  const { type = 'info', filled = false, className, ...rest } = props;

  const Icon = filled ? ICONS[type].filled : ICONS[type].outline;

  return <Icon className={clsx('h-6 w-6 shrink-0', className)} {...rest} />;
};

export { AlertIcon };