import React from 'react';
import { Card } from '@/atoms/card';
import { Flex } from '@/atoms/flex';
import { RadioGroup } from '@/atoms/radio-group';
import { type CurriculumReviewQuestionSatisfactionOption } from '@/types/curriculumContents.type';
import { ReviewQuestionContentHeader } from './review-comp';

interface ReviewQuestionSatisfactionOptionProps {
  question: CurriculumReviewQuestionSatisfactionOption;
  answer: string;
  error?: string;
  onChange: (value: string) => void;
}

function ReviewQuestionSatisfisRadio(
  props: ReviewQuestionSatisfactionOptionProps
): React.ReactNode {
  const { question, answer, onChange } = props;
   
  return (
    <>
      <Card size="2">
        <ReviewQuestionContentHeader
          icon={question.icon}
          question={
            question.question ??
            '이번 학습에 대한 전반적인 만족도를 알려주세요.'
          }
          title={question.title ?? '만족도 조사'}
          type={question.type}
        />
      </Card>
      <RadioGroup.Root color="iris" mt="3" onValueChange={onChange} value={answer}>
        <Flex direction="column" gap="2">
          {question.options?.map((option) => (
            <RadioGroup.Item key={option.value} value={String(option.value)}>
              {option.label}
            </RadioGroup.Item>
          ))}
        </Flex>
      </RadioGroup.Root>
    </>
  );
}

export default ReviewQuestionSatisfisRadio;
