ChallengeCard.tsx

import { UserChallengeState } from 'enums'
import { UserChallenge } from 'models'
import React from 'react'
import ChallengeCardDone from '../ChallengeCardDone/ChallengeCardDone'
import ChallengeCardLast from '../ChallengeCardLast/ChallengeCardLast'
import ChallengeCardLocked from '../ChallengeCardLocked/ChallengeCardLocked'
import ChallengeCardOnGoing from '../ChallengeCardOnGoing/ChallengeCardOnGoing'
import ChallengeCardUnlocked from '../ChallengeCardUnlocked/ChallengeCardUnlocked'
import './challengeCard.scss'

interface ChallengeCardProps {
  userChallenge: UserChallenge | undefined
  indexSlider: number
  index: number
  cardWidth: number
  cardHeight: number
  moveToSlide: (slideIndex: number) => void
}

const ChallengeCard = ({
  userChallenge,
  indexSlider,
  index,
  cardWidth,
  cardHeight,
  moveToSlide,
}: ChallengeCardProps) => {
  const renderCard = (userChallenge: UserChallenge | undefined) => {
    switch (userChallenge?.state) {
      case UserChallengeState.LOCKED:
        return <ChallengeCardLocked userChallenge={userChallenge} />
      case UserChallengeState.UNLOCKED:
        return <ChallengeCardUnlocked userChallenge={userChallenge} />
      case UserChallengeState.DONE:
        return <ChallengeCardDone userChallenge={userChallenge} />
      case UserChallengeState.ONGOING:
      case UserChallengeState.DUEL:
        return <ChallengeCardOnGoing userChallenge={userChallenge} />
      default:
        return <ChallengeCardLast />
    }
  }

  return (
    <button
      onClick={() => moveToSlide(index)}
      className={indexSlider === index ? 'slide active' : 'slide inactive'}
      style={{
        minWidth: `${cardWidth}px`,
        maxWidth: `${cardWidth}px`,
        minHeight: `${cardHeight}px`,
        border: 'none',
        background: 'none',
        padding: 0,
      }}
    >
      {renderCard(userChallenge)}
    </button>
  )
}

export default ChallengeCard