import type { ReactNode } from "react";
import { IconCheck, IconError, IconInfo, IconWarning } from "./icons.tsx";

const ICON = { success: IconCheck, error: IconError, warning: IconWarning, info: IconInfo };

export function Notice({ tone, title, children, action }: {
  tone: "success" | "error" | "warning" | "info"; title?: ReactNode; children?: ReactNode; action?: ReactNode;
}) {
  const I = ICON[tone];
  return (
    <div className={`ui-notice ui-notice--${tone}`} role={tone === "error" || tone === "warning" ? "alert" : "status"}>
      <span className="ui-notice__icon"><I size={16} /></span>
      <div className="ui-notice__body">
        {title && <div className="ui-notice__title">{title}</div>}
        {children && <div className="ui-notice__text">{children}</div>}
      </div>
      {action && <div className="ui-notice__action">{action}</div>}
    </div>
  );
}