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

  let {
    id,
    items,
    compact = false,
  }: {
    id?: string;
    items: UiStatusItem[];
    compact?: boolean;
  } = $props();
</script>

<section class="status-strip" data-compact={compact} data-model-id={id}>
  {#each items as item (item.id)}
    <FooterCell {item} />
  {/each}
</section>

<style>
  .status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    border: var(--ui-border);
    background: var(--ui-color-line);
  }

  .status-strip[data-compact="true"] {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  }
</style>
