/** Loading + error surfaces — every page swaps its "Loading…" text for these. */

const WIDTHS = ['92%', '70%', '84%', '55%', '78%']

export function Skeleton(props: { rows?: number }) {
  const rows = props.rows ?? 3
  return (
    <div className="wf-skel" aria-busy="true" aria-label="Loading">
      {Array.from({ length: rows }, (_x, i) => (
        <div key={i} className="wf-skel-bar" style={{ width: WIDTHS[i % WIDTHS.length] }} />
      ))}
    </div>
  )
}

export function ErrorState(props: { message: string; onRetry?: () => void }) {
  return (
    <div className="wf-error" role="alert">
      <span className="msg">{props.message}</span>
      {props.onRetry !== undefined && (
        <button type="button" className="wf" onClick={props.onRetry}>Try again</button>
      )}
    </div>
  )
}