<!-- #region Card [C:2] [TYPE Component] [SEMANTICS card, container, layout, atom] -->
<!-- @BRIEF Standardized container component with padding options and optional title header. -->
<!-- @LAYER UI -->
<!-- @UX_STATE Bare -> Container renders slot content without title row. -->
<!-- @UX_STATE Titled -> Header row appears above padded content area. -->
<!--
@SEMANTICS: card, container, ui-atom
@PURPOSE:   Standardized container with padding and elevation.
@LAYER     Atom
@RELATION  DEPENDS_ON -> [EXT:frontend:Utils]

@UX_STATE: Bare -> Container renders slot content without a title row.
@UX_STATE: Titled -> Header row appears above the padded content area.
-->

<script lang="ts">
  // [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-border bg-surface-card text-text shadow-sm",
    className,
  )}
  {...rest}
>
  {#if title}
    <div class="flex flex-col space-y-1.5 p-6 border-b border-border">
      <h3 class="text-lg font-semibold leading-none tracking-tight">{title}</h3>
    </div>
  {/if}
  <div class={paddings[padding]}>
    {@render children?.()}
  </div>
</div>
<!-- [/SECTION: TEMPLATE] -->

<!-- #endregion Card -->
