// Consistent loading / error / empty states for data-driven sections.
export function Loading({ label = 'Loading…' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--muted)', padding: '24px 0' }}>
      <span className="spin" /> {label}
    </div>
  )
}

export function ErrorState({ message = 'Something went wrong.' }) {
  return (
    <div className="note" style={{ borderLeftColor: '#b4665f' }}>
      {message}
    </div>
  )
}

export function EmptyState({ children }) {
  return (
    <div
      className="panel"
      style={{ padding: '28px', color: 'var(--muted)', textAlign: 'center', fontFamily: 'var(--sans)', fontSize: '0.95rem' }}
    >
      {children}
    </div>
  )
}