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

  const generatedId = $props.id();

  let { module }: { module: UiModuleBlock } = $props();

  let titleId = $derived(`${generatedId}-title`);
  let ariaLabel = $derived(module.title ? undefined : module.label || module.id);
</script>

<aside
  class="module-card"
  data-severity={module.severity || "neutral"}
  data-model-id={module.id}
  aria-labelledby={module.title ? titleId : undefined}
  aria-label={ariaLabel}
>
  <div>
    {#if module.title}
      <h2 id={titleId}>{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: 0.5rem;
    align-items: start;
    min-width: 0;
    min-height: 4.15rem;
    border: var(--ui-border);
    background: rgba(6, 8, 7, 0.82);
    padding: 0.5rem;
  }

  h2,
  p {
    margin: 0;
  }

  h2 {
    color: var(--ui-color-muted);
    font-size: 0.56rem;
    line-height: 1;
    text-transform: uppercase;
  }

  strong {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--ui-font-display);
    font-size: clamp(1.25rem, 1.75vw, 1.72rem);
    line-height: 0.82;
    overflow-wrap: anywhere;
  }

  p {
    margin-top: 0.2rem;
    color: var(--ui-color-muted);
    font-size: 0.49rem;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .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>
