<script lang="ts">
  import type { UiSeverity } from "../types";
  import IconGlyph from "./IconGlyph.svelte";

  let {
    title,
    detail,
    icon = "mdi:information-outline",
    severity = "neutral",
  }: {
    title: string;
    detail?: string;
    icon?: string;
    severity?: UiSeverity;
  } = $props();
</script>

<section class="system-state" data-severity={severity}>
  <IconGlyph name={icon} size="lg" />
  <div>
    <h2>{title}</h2>
    {#if detail}
      <p>{detail}</p>
    {/if}
  </div>
</section>

<style>
  .system-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ui-space-3);
    align-items: center;
    border: var(--ui-border);
    background: rgba(6, 8, 7, 0.82);
    padding: var(--ui-space-4);
  }

  .system-state[data-severity="warning"] {
    color: var(--ui-color-warning);
  }

  .system-state[data-severity="danger"],
  .system-state[data-severity="unavailable"] {
    color: var(--ui-color-danger);
  }

  .system-state[data-severity="loading"] {
    color: var(--ui-color-accent);
  }

  h2,
  p {
    margin: 0;
    text-transform: uppercase;
  }

  h2 {
    font-size: 1rem;
  }

  p {
    margin-top: var(--ui-space-1);
    color: var(--ui-color-muted);
    font-size: 0.72rem;
  }
</style>
