export function Loading({ text = 'Loading...' }: { text?: string }) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '64px 0',
        gap: 16,
        color: 'var(--text3)',
      }}
    >
      {/* Animated line */}
      <div style={{ width: 120, height: 2, background: 'var(--border-md)', borderRadius: 1, overflow: 'hidden', position: 'relative' }}>
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '40%',
            height: '100%',
            background: 'var(--cyan)',
            borderRadius: 1,
            animation: 'scan 1.2s ease-in-out infinite',
          }}
        />
      </div>
      <style>{`
        @keyframes scan {
          0%   { left: -40%; }
          100% { left: 140%; }
        }
      `}</style>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.06em' }}>
        {text}
      </span>
    </div>
  );
}

export function ErrorState({ error }: { error: Error }) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '64px 0',
        fontFamily: 'var(--font-mono)',
        fontSize: 15,
        color: 'var(--red)',
        gap: 8,
      }}
    >
      <span style={{ opacity: 0.5 }}>ERR</span>
      {error.message}
    </div>
  );
}
