'use client';

interface ErrorDisplayProps {
  error: string | Error | null;
  onRetry?: () => void;
}

export function ErrorDisplay({ error, onRetry }: ErrorDisplayProps) {
  if (!error) return null;

  const errorMessage = error instanceof Error ? error.message : error;

  return (
    <div style={{
      padding: '16px',
      margin: '16px 0',
      background: 'var(--md-sys-color-error-container)',
      color: 'var(--md-sys-color-on-error-container)',
      borderRadius: '12px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: '16px'
    }}>
      <div style={{ flex: 1 }}>
        <p style={{
          margin: 0,
          fontSize: '14px',
          fontWeight: '500'
        }}>
          Ошибка
        </p>
        <p style={{
          margin: '4px 0 0 0',
          fontSize: '14px',
          opacity: 0.9
        }}>
          {errorMessage}
        </p>
      </div>
      {onRetry && (
        <button
          onClick={onRetry}
          style={{
            padding: '8px 16px',
            background: 'var(--md-sys-color-error)',
            color: 'var(--md-sys-color-on-error)',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
            fontSize: '14px',
            fontWeight: '500'
          }}
        >
          Повторить
        </button>
      )}
    </div>
  );
}