<script lang="ts">
  // 로딩 placeholder. 기존의 ad-hoc `animate-pulse h-N` div 패턴 통합.
  type Rounded = 'sm' | 'md' | 'lg' | 'card' | 'full';

  interface Props {
    /** Tailwind width 클래스 (예: 'w-full', 'w-32') 또는 임의값 */
    w?: string;
    /** Tailwind height 클래스 (예: 'h-4', 'h-28') */
    h?: string;
    rounded?: Rounded;
    class?: string;
  }

  let { w = 'w-full', h = 'h-4', rounded = 'md', class: className = '', ...rest }: Props = $props();

  const roundedClass: Record<Rounded, string> = {
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    card: 'rounded-card',
    full: 'rounded-full',
  };

  let baseClass = $derived(
    ['animate-pulse bg-surface', w, h, roundedClass[rounded], className].join(' ')
  );
</script>

<div class={baseClass} {...rest}></div>
