import { h, VNode } from "preact";

export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
export interface NotificationCard {
  message: string;
  description?: string | VNode;
  details?: string | VNode | string;
  type: MessageType;
}


interface Props {
  notification?: NotificationCard;
}

export function NotificationCardBulma({
  notification: n,
}: Props): VNode | null {
  if (!n) return null;
  return (
    <div class="notification">
      <div class="columns is-vcentered">
        <div class="column is-12">
          <article
            class={n.type === "ERROR"
              ? "message is-danger"
              : n.type === "WARN"
                ? "message is-warning"
                : "message is-info"}
          >
            <div class="message-header">
              <p>{n.message}</p>
            </div>
            {n.description && (
              <div class="message-body">
                <div>{n.description}</div>
                {n.details && <pre>{n.details}</pre>}
              </div>
            )}
          </article>
        </div>
      </div>
    </div>
  );
}
