import React from 'react' import { translate } from 'cozy-ui/react/I18n' import Modal from 'components/CommonKit/Modal/Modal' import { getPicto } from 'utils/utils' import { EcogestureType } from 'services/dataChallengeContracts' import ModalUnlocked from 'components/CommonKit/Modal/ModalUnlocked' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' interface EcogestureModalProps { opened: boolean ecogesture: EcogestureType t: Function handleCloseClick: () => void handleStartClick: () => void } const EcogestureModal: React.FC<EcogestureModalProps> = ({ opened, ecogesture, t, handleCloseClick, }: EcogestureModalProps) => { return ( <> {!ecogesture ? ( <></> ) : ( <Modal open={opened} border={ecogesture.unlocked} handleCloseClick={handleCloseClick} > <div className="em-header text-14-normal-uppercase"> {t('ECOGESTURE.TITLE_ECOGESTURE')} </div> <div className="em-content-box"> <div className="em-title text-24-bold ">{ecogesture.shortName}</div> <div className="em-detail"> <div className="em-detail-nwh"> <span className="text-16-bold">{ecogesture.nwh} </span> <span className="em-detail-nwh-unit text-16-normal">nWh</span> </div> <div className="em-picto-flow"> {ecogesture.fluidTypes.map((fluid, index) => ( <div key={index}> <StyledIcon className="em-pic-content" icon={getPicto(fluid)} size={25} /> </div> ))} </div> </div> <div className="em-description text-16-normal-150"> {ecogesture.longDescription} </div> </div> </Modal> )} </> ) } export default translate()(EcogestureModal)