import styles from 'styles/Main.module.scss'
import React from 'react'
import useSettings from 'hooks/useSettings'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBan, faSpinner } from '@fortawesome/free-solid-svg-icons'

const Splash = ({ type, fixed = false }) => {
  const { t } = useSettings()

  return (
    <div className={`${type === 'connection' ? styles.connection : styles.loader} ${fixed ? 'fixed' : ''}`}>
      <FontAwesomeIcon icon={type === 'connection' ? faBan : faSpinner} />
      <p>{type === 'connection' ? t('no_connection') : t('loading')}</p>
    </div>
  )
}

export default Splash