import React from 'react';
import { Card, Grid, TextArea } from '@/atoms';
import { type CurriculumReviewQuestionSatisfactionText } from '@/types/curriculumContents.type';
import { ReviewQuestionContentHeader } from './review-comp';

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

export default function ReviewQuestionSatisfisText(
  props: ReviewQuestionSatisfactionTextProps
): React.ReactNode {
  const { question, answer, onChange } = props;

  return (
    <Card size="2" style={{ height: '100%', width: '100%' }}>
      <Grid height="100%" rows="auto 1fr">
        <ReviewQuestionContentHeader
          icon={question.icon}
          question={
            question.question ??
            '이번 학습에 대해 추가로 남길 의견이 있다면 공유해주세요.'
          }
          title={question.title ?? '만족도 조사'}
          type={question.type}
        />
        <TextArea
          mt="2"
          onChange={(e) => {
            onChange(e.target.value);
          }}
          placeholder={question.placeholder}
          style={{
            height: '100%',
          }}
          value={answer}
        />
      </Grid>
    </Card>
  );
}
