<!-- [DEF:Card:Component] -->
<!--
@TIER: TRIVIAL
@SEMANTICS: card, container, ui-atom
@PURPOSE:   Standardized container with padding and elevation.
@LAYER:     Atom
-->

<script lang="ts">
  // [SECTION: PROPS]
  export let title: string = "";
  export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
  // [/SECTION: PROPS]

  const paddings = {
    none: "p-0",
    sm: "p-3",
    md: "p-6",
    lg: "p-8"
  };
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm">
  {#if title}
    <div class="flex flex-col space-y-1.5 p-6 border-b border-gray-100">
      <h3 class="text-lg font-semibold leading-none tracking-tight">{title}</h3>
    </div>
  {/if}
  <div class="{paddings[padding]}">
    <slot />
  </div>
</div>
<!-- [/SECTION: TEMPLATE] -->

<!-- [/DEF:Card:Component] -->