import React, { ReactNode } from 'react';
import { AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { ModerationErrorBoundary } from './ModerationErrorBoundary';

interface SubmissionErrorBoundaryProps {
  children: ReactNode;
  submissionId?: string;
}

/**
 * Lightweight Error Boundary for Submission-Related Components
 * 
 * Wraps ModerationErrorBoundary with a submission-specific fallback UI.
 * Use this for any component that displays submission data.
 * 
 * Usage:
 * ```tsx
 * <SubmissionErrorBoundary submissionId={id}>
 *   <SubmissionDetails />
 * </SubmissionErrorBoundary>
 * ```
 */
export function SubmissionErrorBoundary({ 
  children, 
  submissionId 
}: SubmissionErrorBoundaryProps) {
  return (
    <ModerationErrorBoundary 
      submissionId={submissionId}
      fallback={
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            Failed to load submission data. Please try refreshing the page.
          </AlertDescription>
        </Alert>
      }
    >
      {children}
    </ModerationErrorBoundary>
  );
}