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

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

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

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

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