import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'

interface NegaWattModalProps {
  opened: boolean
  t: Function
  handleCloseClick: () => void
  handleStartClick: () => void
}

const NegaWattModal: React.FC<NegaWattModalProps> = ({
  opened,
  t,
  handleCloseClick,
}: NegaWattModalProps) => {
  return (
    <>
      <Modal open={opened} handleCloseClick={handleCloseClick}>
        <div className="em-header text-14-normal-uppercase">
          {t('NEGAWATT.TITLE_NEGAWATT')}
        </div>
        <div className="em-content-box">
          <div className="em-content-box-text">
            <div className="em-title text-19-bold ">
              Que sont les néga Watt heure ?
            </div>
            <div className="em-description-2 text-16">
              {t('NEGAWATT.ANSWER.BASE')}
            </div>
            <div className="em-description-2 text-16">
              <div className="em-description-3">
                {t('NEGAWATT.ANSWER.STRONG')}
              </div>
              <div className="em-description-3">
                {t('NEGAWATT.ANSWER.MEDIUM')}
              </div>
              <div className="em-description-3">
                {t('NEGAWATT.ANSWER.WEAK')}
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default translate()(NegaWattModal)