import type { UiSeverity } from "../types";
import { IconGlyph } from "./IconGlyph";

export interface SystemStateProps {
  title: string;
  detail?: string;
  icon?: string;
  severity?: UiSeverity;
}

export function SystemState({
  title,
  detail,
  icon = "mdi:information-outline",
  severity = "neutral",
}: SystemStateProps) {
  return (
    <section className="system-state" data-severity={severity}>
      <IconGlyph name={icon} size="lg" />
      <div>
        <h2>{title}</h2>
        {detail ? <p>{detail}</p> : null}
      </div>
    </section>
  );
}