IncompleteDataWarning.tsx

import warningDark from 'assets/icons/ico/warning-dark.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
import React from 'react'
import { formatListWithAnd } from 'utils/utils'
import './incompleteDataWarning.scss'

const IncompleteDataWarning = ({
  incompleteDataFluids,
}: {
  incompleteDataFluids: FluidType[]
}) => {
  const { t } = useI18n()

  const formattedFluidList = formatListWithAnd(
    incompleteDataFluids.map(fluidType =>
      t(`FLUID.${FluidType[fluidType]}.LABEL_PREPOSITION`)
    )
  )
  return (
    <div className="analysis-warning">
      <div className="warning-header">
        <StyledIcon icon={warningDark} size={30} />
        <h1>{t('analysis.warning_title')}</h1>
      </div>
      <div className="warning-content">
        <p>
          {t('analysis.warning_text', {
            fluidList: formattedFluidList,
          })}
        </p>
      </div>
    </div>
  )
}

export default IncompleteDataWarning