import { ReactNode } from 'react';
import classNames from 'classnames';

type AlertProps = {
  content?: ReactNode;
  className?: string;
  children?: ReactNode;
};

function Alert(props: AlertProps) {
  return (
    <div
      role='alert'
      className={classNames(
        'text-md text-center font-medium',
        'relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700',
        props.className
      )}
    >
      {props.content || props.children}
    </div>
  );
}

export default Alert;
