Loader.tsx

import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType } from 'enums'
import React from 'react'
import './Loader.scss'

interface LoaderProps {
  color?: 'gold' | 'gaz' | 'elec' | 'water' | 'black'
  fluidType?: FluidType
  text?: string
}

/**
 * Loader of Ecolyo, default color is gold
 * @param color {'gold' | 'gaz' | 'elec' | 'water'} Default is gold
 * @param text Optional, text to be placed under the loader
 */
const Loader = ({ color = 'gold', fluidType, text }: LoaderProps) => {
  const { t } = useI18n()
  let variant = color

  if (fluidType !== undefined) {
    switch (fluidType) {
      case FluidType.ELECTRICITY:
        variant = 'elec'
        break
      case FluidType.GAS:
        variant = 'gaz'
        break
      case FluidType.WATER:
        variant = 'water'
        break
      case FluidType.MULTIFLUID:
        variant = 'gold'
        break
    }
  }

  return (
    <div className={`loader ${variant}`}>
      <div
        className="bars"
        aria-busy="true"
        role="progressbar"
        aria-label={t('common.accessibility.loading')}
        title={t('common.accessibility.loading')}
      >
        <div className="bar" />
        <div className="bar" />
        <div className="bar" />
      </div>
      {text}
    </div>
  )
}

export default Loader