import React, { FC, Fragment, ReactNode } from 'react';
import css from './index.module.css';
import SVGInfo from '../../assets/icons/icon-attention.svg';
import SVGClose from '../../assets/icons/close.svg';
import { MilaGridColumn, MilaGridContainer, MilaGridVoid } from '../../index';

export interface AlertProps {
  title?: string;
  text: ReactNode;
  backgroundColor?: string;
  isOpen?: boolean;
  isDismissable?: boolean;
  handleClose?: () => void;
  displayInfoIcon?: boolean;
}

const Alert: FC<AlertProps> = ({
  title,
  text,
  backgroundColor,
  isDismissable,
  isOpen,
  handleClose,
  displayInfoIcon,
}) => {
  if (!isOpen) {
    return null;
  }

  return (
    <div
      className={css.alert}
      style={backgroundColor && { background: backgroundColor }}
      data-testid="Alert"
    >
      <MilaGridContainer>
        <MilaGridVoid>
          <MilaGridColumn
            columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
            offset={['lg-1', 'xl-2', 'xxl-3']}
            className={css.alert__wrapper}
          >
            {isDismissable && (
              <button className={css.alert__close} onClick={handleClose}>
                <SVGClose width={12} height={12} />
              </button>
            )}

            <Fragment>
              <div className={css.alert__container}>
                {displayInfoIcon && (
                  <div className={css.alert__icon}>
                    <SVGInfo width={40} height={40} />
                  </div>
                )}
                <div className={css.alert__content}>
                  {title && <h3>{title}</h3>}
                  {text}
                </div>
              </div>
            </Fragment>
          </MilaGridColumn>
        </MilaGridVoid>
      </MilaGridContainer>
    </div>
  );
};

export default Alert;