<script lang="ts">
  // 공용 Card 컨테이너.
  // 기존 코드의 `bg-surface rounded-card border border-default` 패턴 1군데화.
  import type { Snippet } from 'svelte';

  interface Props {
    padded?: boolean;
    interactive?: boolean;
    onclick?: (e: MouseEvent) => void;
    children?: Snippet;
    class?: string;
  }

  let {
    padded = true,
    interactive = false,
    onclick,
    children,
    class: className = '',
    ...rest
  }: Props = $props();

  let baseClass = $derived(
    [
      'bg-surface border border-default rounded-card',
      padded ? 'p-5' : '',
      interactive
        ? 'cursor-pointer hover:bg-surface-hover transition-colors focus-visible:ring-2 focus-visible:ring-accent-ring focus-visible:outline-none'
        : '',
      className,
    ]
      .filter(Boolean)
      .join(' ')
  );
</script>

{#if interactive}
  <button type="button" class={baseClass} {onclick} {...rest}>
    {@render children?.()}
  </button>
{:else}
  <div class={baseClass} {...rest}>
    {@render children?.()}
  </div>
{/if}
