import React from 'react'; 
import { Box } from '@/atoms/box';
import { Flex } from '@/atoms/flex';
import { Grid } from '@/atoms/grid';
import { Heading } from '@/atoms/heading';
import { Progress } from '@/atoms/progress';
import { Typo } from '@/atoms/typo';
import { useCurriculumReviewContext } from '../curriculum-review-context';

interface ReviewQuestionHeaderProps {
  index: number;
  total: number;
}

function ReviewQuestionHeader({
  index,
  total,
}: ReviewQuestionHeaderProps): React.ReactNode {
  const { reviewContents } = useCurriculumReviewContext();

  return (
    <Box height="100%" width="100%">
      <Grid columns="1fr 40px" width="100%">
        <Heading
          mb="3"
          truncate
          variant={{ initial: 'heading5', md: 'heading3' }}
        >
          {reviewContents.title}
        </Heading>
      </Grid>
      <Flex justify="between" mb="2" width="100%">
        <Typo color="gray" size={{ initial: '1', md: '2' }}>
          진행 상황
        </Typo>
        <Typo color="gray" size={{ initial: '1', md: '2' }}>
          {index + 1} / {total} 완료
        </Typo>
      </Flex>
      <Progress color="iris" max={total} value={index + 1} />
    </Box>
  );
}

export default ReviewQuestionHeader;
