StartChallengeModal.tsx

import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { Duration } from 'luxon'
import { ChallengeType } from 'services/dataChallengeContracts'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import StyledWhiteButton from 'components/CommonKit/Button/StyledWhiteButton'
import DefaultChallengeIcon from 'assets/icons/visu/challenge/default_challenge.svg'

interface ChallengeModalProps {
  opened: boolean
  challenge: ChallengeType
  t: Function
  handleCloseClick: () => void
  handleStartClick: () => void
}

const ChallengeModal: React.FC<ChallengeModalProps> = ({
  opened,
  challenge,
  t,
  handleCloseClick,
  handleStartClick,
}: ChallengeModalProps) => {
  return (
    <Modal open={opened} handleCloseClick={handleCloseClick}>
      <div className="cm-header text-14-normal-uppercase">
        {t('CHALLENGE.TITLE_CHALLENGE')}
      </div>
      {!challenge ? (
        <StyledSpinner />
      ) : (
        <>
          <div className="cm-title text-24-bold ">{challenge.title}</div>
          <div className="cm-duration text-24-normal">
            {Duration.fromObject(challenge.duration).as('days')} Jours
          </div>
          <StyledIconButton
            className="cm-icon"
            icon={!challenge.icon ? DefaultChallengeIcon : challenge.icon}
            size={100}
          />
          <div className="cm-description text-16-bold">
            {challenge.description}
          </div>
        </>
      )}
      <StyledWhiteButton onClick={handleStartClick}>
        {t('CHALLENGE.CHALLENGE_GO')}
      </StyledWhiteButton>
    </Modal>
  )
}

export default translate()(ChallengeModal)