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

  let { module }: { module: UiModuleBlock } = $props();
</script>

<aside class="module-card" data-severity={module.severity || "neutral"} data-model-id={module.id}>
  <div>
    {#if module.title}
      <h2>{module.title}</h2>
    {/if}
    {#if module.value}
      <strong>{module.value}</strong>
    {/if}
    {#if module.detail || module.label}
      <p>{module.detail || module.label}</p>
    {/if}
  </div>
  {#if module.icon}
    <IconGlyph name={module.icon} size="lg" />
  {/if}
</aside>

<style>
  .module-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-space-4);
    align-items: start;
    min-width: min(100%, 18rem);
    border: var(--ui-border);
    background: rgba(6, 8, 7, 0.82);
    padding: var(--ui-space-3);
  }

  h2,
  p {
    margin: 0;
  }

  h2 {
    color: var(--ui-color-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
  }

  strong {
    display: block;
    margin-top: var(--ui-space-1);
    font-family: var(--ui-font-display);
    font-size: 2.25rem;
    line-height: 0.9;
  }

  p {
    margin-top: var(--ui-space-1);
    color: var(--ui-color-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
  }

  .module-card[data-severity="ok"] :global(.icon-glyph) {
    background: var(--ui-color-accent);
    color: #050605;
  }

  .module-card[data-severity="warning"] {
    border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
    color: var(--ui-color-warning);
  }

  .module-card[data-severity="danger"] {
    border-color: color-mix(in srgb, var(--ui-color-danger), transparent 32%);
    color: var(--ui-color-danger);
  }

  .module-card[data-severity="stale"],
  .module-card[data-severity="unavailable"] {
    color: var(--ui-color-stale);
  }

  .module-card[data-severity="loading"] {
    color: var(--ui-color-accent);
  }
</style>
