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-[#5a2026] bg-[#1a0f12] 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-[#7c2d34] bg-[#31161b] text-xs text-[#ff7b8a]">
          !
        </div>
        <div className="flex-1">
          <h3 className="font-mono text-base font-semibold text-[#ffe5e9]">{error.title}</h3>
          <p className="mt-0.5 font-mono text-sm text-[#ffb8c2]">{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-[#5a2026] bg-[#241317] px-2 py-1 font-mono text-[10px] uppercase tracking-[0.18em] text-[#ffb8c2]"
            >
              {item.label}: <span className="text-[#ffe5e9]">{item.value}</span>
            </div>
          ))}
        </div>
      )}

      {/* Detail - Simplified */}
      {error.detail && (
        <div className="rounded border border-[#5a2026] bg-[#130b0d] p-3">
          <div className="mb-1 font-mono text-[10px] uppercase tracking-[0.18em] text-[#ff8f9d]">
            Details
          </div>
          <div className="whitespace-pre-wrap font-mono text-sm leading-relaxed text-[#ffd6dc]">
            {error.detail}
          </div>
        </div>
      )}
    </div>
  );
};
