EcogestureCard.tsx

import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import Icon from 'cozy-ui/react/Icon'
import { getEcogestureIconSVG } from '../../CommonKit/SVG/EcogesturesSVG'

interface EcogestureCardProps {
  ecogesture: EcogestureType
  handleClick?: (ecogesture: EcogestureType) => void
  t: Function
  challengeEcogesture?: number
}

const EcogestureCard: React.FC<EcogestureCardProps> = ({
  ecogesture,
  handleClick,
  t,
  challengeEcogesture,
}: EcogestureCardProps) => {
  const handleCardclick = () => {
    handleClick && ecogesture ? handleClick(ecogesture) : null
  }

  return (
    <>
      {challengeEcogesture ? (
        <div className={`cp-eg-${challengeEcogesture}`}>
          <StyledEcogestureCard border={true} onClick={handleCardclick}>
            {ecogesture.iconName && (
              <div>
                <Icon
                  className="Icon"
                  icon={getEcogestureIconSVG(ecogesture.iconName)}
                  size={64}
                />
              </div>
            )}
            <div className="challenge-eg">
              {ecogesture.shortName}
              {/* {`${t('CHALLENGE.ECOGESTURE')} ${challengeEcogesture}`} */}
            </div>
          </StyledEcogestureCard>
        </div>
      ) : (
        <StyledEcogestureCard
          unlocked={ecogesture.unlocked ? ecogesture.unlocked : false}
          onClick={handleCardclick}
        >
          <div className="ec">
            <div className="ec-content">
              {ecogesture.iconName && (
                <div>
                  <Icon
                    className="Icon"
                    icon={getEcogestureIconSVG(ecogesture.iconName)}
                    size={64}
                  />
                </div>
              )}
              <div className="ec-content-short-name text-16-bold">
                {ecogesture.shortName}
              </div>
              <div className={`ec-content-nwh-${ecogesture.unlocked}`}>
                <span className="text-16-bold">{ecogesture.nwh}</span>
                <span className="text-16-normal"> nWh</span>
              </div>
            </div>
          </div>
        </StyledEcogestureCard>
      )}
    </>
  )
}

export default translate()(EcogestureCard)