import classNames from 'classnames';
import { type FunctionComponent, type HTMLProps, type ReactNode, type SVGAttributes } from 'react';

import Check from '@/icons/Check.svg';
import CrossCircleFill from '@/icons/CrossCircleFill.svg';
import ExclamationTriangleFill from '@/icons/ExclamationTriangleFill.svg';
import InfoCircleFill from '@/icons/InfoCircleFill.svg';

import styles from './Alert.module.scss';

interface Props extends HTMLProps<HTMLDivElement> {
  children: ReactNode;
  className?: string;
  variant: 'error' | 'info' | 'success' | 'warning';
}

const ICON_PER_TYPE: Record<Props['variant'], FunctionComponent<SVGAttributes<SVGElement>>> = {
  error: CrossCircleFill,
  info: InfoCircleFill,
  success: Check,
  warning: ExclamationTriangleFill,
};

export const Alert: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
  const Icon = ICON_PER_TYPE[variant];

  return (
    <div
      className={classNames(styles.alert, className, {
        [styles.error]: variant === 'error',
        [styles.info]: variant === 'info',
        [styles.success]: variant === 'success',
        [styles.warning]: variant === 'warning',
      })}
      {...props}
    >
      <div className={styles.iconContainer}>
        <Icon aria-hidden="true" className={styles.icon} role="img" />
      </div>

      <div className={styles.content}>{children}</div>
    </div>
  );
};