/**
 * EmptyState — 리포트/플랜의 섹션·서브섹션에서 데이터가 없을 때 공통으로 쓰는 fallback.
 *
 * size:
 *  - sm: 카드 안 작은 영역 (서브섹션, 그래프 자리 등)
 *  - md: 섹션 내부 일반 영역 (기본값)
 *  - lg: SectionWrapper 전체를 채우는 경우
 *
 * 사용 예:
 *   {nonEmpty(items) ? <List items={items} /> : <EmptyState size="sm" />}
 */
import { cn } from '@/shared/lib/utils';

interface EmptyStateProps {
  size?: 'sm' | 'md' | 'lg';
  hint?: string;
  className?: string;
}

const sizeMap = {
  sm: 'px-4 py-5 rounded-xl',
  md: 'px-6 py-8 rounded-2xl',
  lg: 'px-6 py-12 rounded-2xl',
} as const;

const textSizeMap = {
  sm: 'text-xs',
  md: 'text-sm',
  lg: 'text-sm',
} as const;

export function EmptyState({ size = 'md', hint, className }: EmptyStateProps) {
  return (
    <div
      className={cn(
        'border border-dashed border-slate-200 bg-slate-50/50 text-center',
        sizeMap[size],
        className,
      )}
    >
      <p className={cn('text-slate-500', textSizeMap[size])}>데이터 없음</p>
      {hint && <p className="text-xs text-slate-400 mt-1">{hint}</p>}
    </div>
  );
}
