import React from 'react';
import { Button, Flex, Grid, Heading, Typo } from '@/atoms';
import { HomeIcon, ResetIcon } from '@/icon';
import { useCurriculumReviewContext } from './curriculum-review-context';

const THANKS_IMAGE_S3_URL = 'https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_thanks.svg';

function CompleteReview(props: {
  onClickReviewMyAnswer: () => void;
}): React.ReactNode {
  const { onClickReviewMyAnswer } = props;
  const { reviewContents, sectionTitle, curriculum, onClickEndReview: onClickNextContents } =
    useCurriculumReviewContext();

  const { reviewMeta } = curriculum.contents;

  return (
    <Flex
      align="center"
      direction="column"
      height="100%"
      justify="between"
      maxHeight="550px"
      maxWidth="650px"
      mx="4"
      my="6"
      width="100%"
    >
      <Flex align="center" direction="column">
        <Heading mb="6" variant="heading5" weight="regular">
          {reviewMeta?.endReviewTopTitle || '응답을 성공적으로 제출했습니다'}
        </Heading>
        <img
          alt="complete-review"
          height={141}
          src={THANKS_IMAGE_S3_URL}
          width={118}
        />
        <Typo color="gray" mt="6" variant="caption">
          {sectionTitle}
        </Typo>
        <Heading variant="heading5">{reviewContents.title}</Heading>
        <Typo align="center" color="gray" mt="6">
          {reviewMeta?.endReviewDescription ||
            `이번 학습이 리더십에 도움이 되었기를 바랍니다.\n 앞으로 있을 리더님의 성장을 기대합니다.`}
        </Typo>
      </Flex>

      <Grid columns={{ initial: '1fr', md: '2' }} gap="3" width="100%">
        <Button onClick={onClickReviewMyAnswer} variant="outline">
          {reviewMeta?.endReviewBackButtonTitle || '나의 응답 다시 보기'}
          <ResetIcon />
        </Button>
        <Button  onClick={onClickNextContents}>
          커리큘럼으로 돌아가기 
          <HomeIcon />
        </Button>
      </Grid>
    </Flex>
  );
}

export default CompleteReview;
