import React, { useMemo } from 'react';
import type { CurriculumAiTrainingContents } from '@/types/curriculumContents.type';
import { Button } from '@/atoms/button';
import { Flex } from '@/atoms/flex';
import { Typo } from '@/atoms/typo';
import { ResetIcon } from '@/icon';
import { useCurriculumContext } from '../curriculum-context';

interface CurriculumAiTraningProps {
  item: CurriculumAiTrainingContents;
}

function CurriculumAiTraning({
  item,
}: CurriculumAiTraningProps): React.ReactNode {
  const { title, description, buttonTitle } = item;
  const { curriculumCompleteMap, onActionButtonClick } = useCurriculumContext();

  const done = useMemo(() => {
    return Boolean(curriculumCompleteMap[item.uuid]);
  }, [curriculumCompleteMap, item.uuid]);

  const bgColor=  done ? 'var(--color-panel-solid)' : undefined;

  return (
    <Flex
      align="center"
      direction="column"
      height="100%"
      justify="center"
      style={{
        backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_ai_bg.png)`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
      }}
      width="100%"
    >
      <Typo color="gray" weight="bold">
        {title}
      </Typo>
      <Typo align="center" as="p" color="gray">
        {description}
      </Typo>

      <Button
        mt="3"
        onClick={() => { onActionButtonClick(item); }}
        style={{ minWidth: 232, backgroundColor: bgColor }}
        variant={done ? 'outline' : 'solid'}
      >
        {done ? '다시 연습하기' : buttonTitle || '시작하기'}
        {done ? <ResetIcon/> : null}
      </Button>
 
    </Flex>
  );
}

export default CurriculumAiTraning;
