import React from 'react'
import classNames from 'classnames'
import './DemioLoading.less'

const DemioLoading = ({ showBackground = false, text = '' }) => (
  <div className={classNames({
    "demio-loading-container": true,
    "--background": showBackground,
    "--text": text
  })}>
    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.00001 1.77778C8.49093 1.77778 8.8889 1.37981 8.8889 0.888889C8.8889 0.397969 8.49093 0 8.00001 0C3.58297 0 0.00202179 3.57971 8.58307e-06 7.99627L0 8C0 9.10457 0.223863 10.1569 0.628686 11.114C1.84315 13.9853 4.6863 16 8.00001 16C12.4183 16 16 12.4183 16 8C16 7.50908 15.602 7.11111 15.1111 7.11111C14.6202 7.11111 14.2222 7.50908 14.2222 8C14.2222 11.4364 11.4364 14.2222 8.00001 14.2222C7.57045 14.2222 7.15106 14.1787 6.74601 14.0958C4.59445 13.6555 2.8474 12.1048 2.12987 10.0685C1.90184 9.42135 1.77778 8.72516 1.77778 8C1.77778 4.56356 4.56357 1.77778 8.00001 1.77778Z" fill="#5D676B" />
    </svg>
    <span>{text}</span>
  </div>
)

export default DemioLoading