ChallengeCard.tsx

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

interface ChallengeCardProps {
  userChallenge?: UserChallenge
  indexSlider: number
  index: number
  cardWidth: number
  cardHeight: number
  isChallengeCardLast: boolean
  moveToSlide: (slideIndex: number) => void
}

const ChallengeCard: React.FC<ChallengeCardProps> = ({
  userChallenge,
  indexSlider,
  index,
  cardWidth,
  cardHeight,
  isChallengeCardLast,
  moveToSlide,
}: ChallengeCardProps) => {
  const renderCard = (userChallenge: UserChallenge | undefined) => {
    if (!userChallenge || isChallengeCardLast) return <ChallengeCardLast />
    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 <ChallengeCardLocked userChallenge={userChallenge} />
    }
  }

  return (
    <div
      onClick={() => moveToSlide(index)}
      className={indexSlider === index ? 'slide active' : 'slide inactive'}
      style={{
        minWidth: `${cardWidth}px`,
        maxWidth: `${cardWidth}px`,
        height: `${cardHeight}px`,
      }}
    >
      {renderCard(userChallenge)}
    </div>
  )
}

export default ChallengeCard