import React from 'react';
import { Box, Card, Flex, Heading, Typo } from '../../atoms';

interface Question {
  answer: string;
  question: string;
}
export interface CoachQuestionListProps {
  questions: Question[];
}

function QuestionItem({ question, answer }: Question): React.ReactNode {
  return (
    <Box key={question}>
      <Heading mb="2" variant="heading5">
        {question}
      </Heading>
      <Card>
        {answer ? (
          <Typo as="p">{answer}</Typo>
        ) : (
          <Typo color="gray">등록된 답변이 없습니다.</Typo>
        )}
      </Card>
    </Box>
  );
}

export function CoachQuestionList({
  questions,
}: CoachQuestionListProps): React.ReactNode {
  return (
    <Flex direction="column" gap="8">
      {questions.map((question) => {
        return <QuestionItem key={question.question} {...question} />;
      })}
    </Flex>
  );
}
