import React from 'react';
import type { ReviewQuestionElement } from '@/types/curriculum.type';
import ReviewQuestionLayout from './review-question-layout';
import ReviewQuestionHeader from './review-question-header';
import ReviewQuestionFooter from './review-question-footer';
import ReviewQuestionBody from './review-question-body';

interface ReviewQuestionProps {
  question: ReviewQuestionElement;
  index: number;
  total: number;
  answer: string;
  error?: string;
  onChange: (value: string) => void;
  onNext: () => void;
  onPrev: () => void;
  isLast: boolean;
  isNextDisabled?: boolean;
  onSubmit: () => void;
  isLoading?: boolean;
}

function ReviewQuestion({
  question,
  index,
  total,
  answer,
  error,
  onChange,
  onNext,
  onPrev,
  isLast,
  isNextDisabled,
  onSubmit,
  isLoading,
}: ReviewQuestionProps): React.ReactElement {
  
  return (
    <ReviewQuestionLayout
      Body={
        <ReviewQuestionBody
          answer={answer}
          error={error}
          onChange={onChange}
          question={question}
        />
      }
      Footer={
        <ReviewQuestionFooter
          index={index}
          isLast={isLast}
          isLoading={isLoading}
          isNextButtonDisabled={isNextDisabled}
          onNext={onNext}
          onPrev={onPrev}
          onSubmit={onSubmit}
        />
      }
      Header={<ReviewQuestionHeader index={index} total={total} />}
    />
  );
}

export default ReviewQuestion;
