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

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

<section class="panel" data-density={density}>
  {#if title}
    <header class="panel__header">
      <h2>{title}</h2>
    </header>
  {/if}
  <div class="panel__body">
    {@render children?.()}
  </div>
</section>

<style>
  .panel {
    position: relative;
    min-width: 0;
    border: var(--ui-border);
    background: rgba(3, 4, 3, 0.86);
    box-shadow: var(--ui-shadow-hard);
  }

  .panel::before,
  .panel::after {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    border-color: var(--ui-color-line-strong);
    content: "";
  }

  .panel::before {
    top: 0.2rem;
    right: 0.2rem;
    border-top: 1px solid;
    border-right: 1px solid;
  }

  .panel::after {
    right: 0.2rem;
    bottom: 0.2rem;
    border-right: 1px solid;
    border-bottom: 1px solid;
  }

  .panel__header {
    padding: 0.42rem 0.55rem 0;
  }

  h2 {
    margin: 0;
    font-family: var(--ui-font-display);
    font-size: clamp(1.45rem, 2.05vw, 1.95rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .panel__body {
    display: grid;
    gap: 0.25rem;
    padding: 0.42rem 0.55rem 0.55rem;
  }

  .panel[data-density="compact"] .panel__body {
    padding: var(--ui-space-2);
  }
</style>
