import React from 'react'

export interface ExtractedQuestionsDisplayProps {
  extractedQuestions?: string[]
  isLoading: boolean
}

export const ExtractedQuestionsDisplay: React.FC<ExtractedQuestionsDisplayProps> = ({ extractedQuestions, isLoading }) => {
  if (!isLoading && (!extractedQuestions || extractedQuestions.length === 0)) {
    return null
  }

  if (isLoading) {
    return (
      <div className="space-y-2">
        <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Questions:</span>
        <div className="space-y-1">
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              data-testid="extracted-question-skeleton"
              className="rounded px-3 py-1 bg-gray-200 animate-pulse w-48 h-5"
            />
          ))}
        </div>
      </div>
    )
  }

  return (
    <div data-testid="extracted-questions-section" className="space-y-2 transition-all duration-300 ease-in-out">
      <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Questions:</span>
      <ol data-testid="extracted-questions-container" className="list-decimal list-inside space-y-1">
        {extractedQuestions?.map((question, index) => (
          <li
            key={index}
            role="listitem"
            data-testid={`extracted-question-${index}`}
            className="text-sm text-gray-700 pl-1"
          >
            {question}
          </li>
        ))}
      </ol>
    </div>
  )
}
