frontend/src/components/LoadingState.tsx

interface LoadingProps {
  message?: string
}

export function LoadingSpinner({ message = 'Loading…' }: LoadingProps) {
  return (
    <div
      style={{
        padding: '60px 0',
        fontFamily: '"Space Grotesk", system-ui, sans-serif',
        fontSize: '13px',
        color: '#8d909e',
      }}
    >
      {message}
    </div>
  )
}

interface ErrorProps {
  message?: string
  onRetry?: () => void
}

export function ErrorState({ message = 'Failed to load data', onRetry }: ErrorProps) {
  return (
    <div style={{ padding: '60px 0' }}>
      <div className="eyebrow" style={{ color: '#c71f48' }}>Error</div>
      <p
        style={{
          fontFamily: '"Source Serif 4", Georgia, serif',
          fontSize: '18px',
          color: '#1b1e2d',
          marginTop: '8px',
        }}
      >
        {message}
      </p>
      {onRetry && (
        <button onClick={onRetry} className="btn-secondary" style={{ marginTop: '12px' }}>
          Retry
        </button>
      )}
    </div>
  )
}