'use client';

interface SearchErrorModalProps {
  isOpen: boolean;
  error: string | null;
  onRetry?: () => void;
  onSkip?: () => void;
  canRetry?: boolean;
}

export function SearchErrorModal({ isOpen, error, onRetry, onSkip, canRetry = true }: SearchErrorModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-surface-container-lowest/50 flex items-center justify-center z-50">
      <div className="bg-primary/10 rounded-none p-6 max-w-md shadow-none">
        <h2 className="text-xl font-normal mb-2 text-error">Search failed</h2>
        <p className="text-sm text-slate-600 mb-4">{error || 'Unable to retrieve specs from the web'}</p>

        <div className="flex gap-3">
          {canRetry && (
            <button
              onClick={onRetry}
              className="flex-1 px-4 py-2 bg-primary text-white rounded font-normal text-sm hover:bg-primary/90"
            >
              Retry
            </button>
          )}
          <button
            onClick={onSkip}
            className="flex-1 px-4 py-2 border border-slate-300 rounded font-normal text-sm hover:bg-surface-50"
          >
            Skip
          </button>
        </div>
      </div>
    </div>
  );
}