import React from 'react';
import { Box } from '@/atoms/box';
import { Flex } from '@/atoms/flex';
import { Typo } from '@/atoms/typo';
import { getCurriculumIcon , getCurriculumQuestionIconColor } from '@/utils/curriculum.utils';

interface ReviewQuestionContentHeaderProps {
  type: string;
  title: string;
  question: string;
  icon?: string;
}

export function ReviewQuestionContentHeader({
  type,
  title,
  question,
  icon,
}: ReviewQuestionContentHeaderProps): React.ReactNode {
  const Icon = getCurriculumIcon({ type, icon });

  return (
    <Box>
      <Flex gap="2" mb="3">
        <Box>
          <Icon
            color={getCurriculumQuestionIconColor(type)}
            height="16"
            width="16"
          />
        </Box>
        <Typo color="gray" weight="bold">
          {title}
        </Typo>
      </Flex>
      <Typo as="p" color="gray">
        {question}
      </Typo>
    </Box>
  );
}
