// WarnBanner.tsx — <WarnBanner>, the Preact-component successor to the
// shadow-DOM <hive-warn> custom element (../hive-warn/hive-warn.js).
// Same three-tier visual language (mara, on `hive-warn`'s own review:
// "there should be distinction between info, warning, error — all
// warnings should be styled identically") — built as a plain Preact
// component instead so it composes cleanly wherever this package's other
// shared components do (JobqRollup, JobqGraph, ApiErrorPanel), rather
// than needing a shadow root + CSS-as-text build step that only resolves
// under one of the two consuming packages' esbuild configs. `ApiErrorPanel`
// is the first consumer — compose from this instead of duplicating the
// banner's own border/colour/pulse rules locally.
//
// `level` defaults to 'warning', matching `hive-warn.js`'s own default.
// Only `error` pulses — an active incident, not a standing caveat, same
// rule `hive-warn.css`'s own comment states.
import type { ComponentChildren } from "preact";
import "./WarnBanner.css";

export type WarnLevel = "info" | "warning" | "error";

export interface WarnBannerProps {
  level?: WarnLevel;
  // Passed straight through to the root element's `class` list —
  // for a caller-specific concern the banner itself has no opinion on
  // (e.g. `ApiErrorPanel` adding a top margin for the context it usually
  // sits in), not for re-styling the banner's own look.
  class?: string;
  children?: ComponentChildren;
}

export function WarnBanner({
  level = "warning",
  class: extraClass,
  children,
}: WarnBannerProps) {
  const classes = ["warn-banner", `warn-banner-${level}`, extraClass]
    .filter(Boolean)
    .join(" ");
  return (
    <div class={classes} role={level === "error" ? "alert" : undefined}>
      {children}
    </div>
  );
}