import type { ReactNode } from 'react';
import { cx } from './ui';

/** A red inline notice for a failure. */
export function ErrorNotice({ children, monospace = false, spaced = true }: { children: ReactNode; monospace?: boolean; /** Leave room above (when something precedes it). */ spaced?: boolean }) {
  return (
    <div role="alert" className={cx('whitespace-pre-wrap rounded-[10px] border border-danger/30 bg-danger/8 px-4 py-2.5 text-[14px] text-danger-soft', spaced ? 'mt-3' : 'mt-0', monospace && 'font-code')}>
      {children}
    </div>
  );
}