import React from 'react';
import { ErrorPanel as ErrorPanelData } from '../../types/terminal';

interface ErrorPanelProps {
  error: ErrorPanelData;
}

export const ErrorPanel: React.FC<ErrorPanelProps> = ({ error }) => {
  const metadata = [
    error.provider ? { label: 'Provider', value: error.provider } : null,
    error.query ? { label: 'Query', value: error.query } : null,
    error.symbol ? { label: 'Symbol', value: error.symbol } : null,
  ].filter((entry): entry is { label: string; value: string } => entry !== null);

  return (
    <div className="my-4 overflow-hidden rounded border border-[var(--term-status-error-border)] bg-[var(--term-status-error)] px-4 py-3">
      {/* Header - Simplified */}
      <div className="flex items-start gap-3 mb-3">
        <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded border border-negative bg-negative/15 text-xs text-negative">
          !
        </div>
        <div className="flex-1">
          <h3 className="font-mono text-base font-semibold text-term-text">{error.title}</h3>
          <p className="mt-0.5 font-mono text-sm text-negative">{error.message}</p>
        </div>
      </div>

      {/* Metadata - Simplified */}
      {metadata.length > 0 && (
        <div className="flex flex-wrap gap-2 mb-3">
          {metadata.map((item) => (
            <div
              key={item.label}
              className="rounded border border-[var(--term-status-error-border)] bg-negative/10 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.18em] text-negative"
            >
              {item.label}: <span className="text-term-text">{item.value}</span>
            </div>
          ))}
        </div>
      )}

      {/* Detail - Simplified */}
      {error.detail && (
        <div className="rounded border border-[var(--term-status-error-border)] bg-negative/8 p-3">
          <div className="mb-1 font-mono text-[10px] uppercase tracking-[0.18em] text-negative">
            Details
          </div>
          <div className="whitespace-pre-wrap font-mono text-sm leading-relaxed text-term-text">
            {error.detail}
          </div>
        </div>
      )}
    </div>
  );
};
