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

<script>
  // [SECTION: IMPORTS]
  import { cn } from "$lib/utils.js";
  // [/SECTION: IMPORTS]

  // [SECTION: PROPS]
  let {
    title = "",
    padding = "md",
    class: className = "",
    children,
    ...rest
  } = $props();
  // [/SECTION: PROPS]

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

<!-- [SECTION: TEMPLATE] -->
<div
  class={cn(
    "rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm",
    className,
  )}
  {...rest}
>
  {#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]}>
    {@render children?.()}
  </div>
</div>
<!-- [/SECTION: TEMPLATE] -->

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