'use client'

import { ResponseCardRenderer } from './response-cards'
import type { PlaygroundResponseState } from '@/lib/api-docs/playground/types'

// Re-export DebugContext type for consumers
export interface DebugContext {
  // Response info
  status: number
  statusText: string
  responseBody: string
  errorMessage?: string
  // Endpoint info (populated by parent)
  endpointName?: string
  endpointMethod?: string
  endpointPath?: string
  requestBody?: string
}

interface ResponseViewerProps {
  responseState: PlaygroundResponseState
  onDebugRequest?: (context: DebugContext) => void
  onExplainRequest?: (context: DebugContext) => void
}

/**
 * ResponseViewer - displays API response with support for different states
 * 
 * Uses modular card components from response-cards/ folder:
 * - IdleCard: No request sent yet
 * - LoadingCard: Request in progress
 * - NetworkErrorCard: Network/connection error
 * - ResponseBodyCard: Success or error with response body
 */
export function ResponseViewer({ responseState, onDebugRequest, onExplainRequest }: ResponseViewerProps) {
  return (
    <ResponseCardRenderer 
      responseState={responseState} 
      onDebugRequest={onDebugRequest}
      onExplainRequest={onExplainRequest}
    />
  )
}
