<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    children,
    density = "dense",
  }: {
    children?: Snippet;
    density?: "compact" | "dense";
  } = $props();
</script>

<section class="grid-frame" data-density={density}>
  {@render children?.()}
</section>

<style>
  .grid-frame {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
  }

  .grid-frame[data-density="compact"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
  }
</style>
