import type { ReactNode } from 'react';
import { Button } from './Button';
import './states.css';

/** 로딩 스켈레톤 블록. */
export function Skeleton({ height = 16, width = '100%', radius = 4 }: {
  height?: number | string;
  width?: number | string;
  radius?: number;
}) {
  return (
    <span
      className="kx-skeleton"
      style={{ height, width, borderRadius: radius }}
      aria-hidden="true"
    />
  );
}

/** 빈 상태. */
export function EmptyState({
  title,
  description,
  action,
  icon,
}: {
  title: string;
  description?: string;
  action?: ReactNode;
  icon?: ReactNode;
}) {
  return (
    <div className="kx-state" role="status">
      {icon && <div className="kx-state__icon" aria-hidden="true">{icon}</div>}
      <p className="kx-state__title">{title}</p>
      {description && <p className="kx-state__desc">{description}</p>}
      {action && <div className="kx-state__action">{action}</div>}
    </div>
  );
}

/** 에러 상태 + 재시도. */
export function ErrorState({
  message = '데이터를 불러오지 못했습니다.',
  onRetry,
}: {
  message?: string;
  onRetry?: () => void;
}) {
  return (
    <div className="kx-state kx-state--error" role="alert">
      <p className="kx-state__title">{message}</p>
      {onRetry && (
        <div className="kx-state__action">
          <Button variant="secondary" onClick={onRetry}>
            다시 시도
          </Button>
        </div>
      )}
    </div>
  );
}
