import { ReactNode } from 'react';

import classNames from 'classnames';

import { SeverityVariant } from '../base';

export { AlertTitle } from './title';
export { AlertIcon } from './icon';

export interface AlertProps {
  variant: SeverityVariant;
  children?: ReactNode;
  className?: string;
}

export function Alert({ variant, children, className }: AlertProps) {
  return (
    <div
      className={classNames(
        'py-3 px-4 rounded-xl',
        {
          'bg-success-50 text-success-700': variant === 'success',
          'bg-danger-50 text-danger-700': variant === 'danger',
          'bg-warning-50 text-warning-700': variant === 'warning',
          'bg-info-50 text-info-700': variant === 'info',
        },
        className
      )}
      role="alert"
    >
      {children}
    </div>
  );
}