// ** MUI Imports
import { useTheme } from '@mui/material/styles'
import Box, { BoxProps } from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'

const FallbackSpinner = ({ sx }: { sx?: BoxProps['sx'] }) => {
  // ** Hook
  const theme = useTheme()

  return (
    <Box
      sx={{
        height: '100vh',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
        ...sx
      }}
    >
      <svg width="40" height="36" viewBox="0 0 40 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clipPath="url(#clip0_522_2374)">
          <path d="M37.288 32.9484C36.8156 32.3009 36.4306 31.6535 36.1682 31.0586C35.8882 30.4112 35.8357 30.0437 35.8357 29.8687V25.6343C35.8357 24.8994 35.7307 24.147 35.5208 23.3946C35.2933 22.6247 34.9608 21.9072 34.5059 21.2423C34.1209 20.6649 33.631 20.14 33.0536 19.685C33.736 19.1251 34.3134 18.5302 34.7684 17.8827C35.7832 16.4654 36.3082 14.9256 36.3082 13.2808C36.3082 11.636 35.9932 10.6911 35.3808 9.4313C34.7684 8.20646 33.876 7.0866 32.7211 6.14171C31.5837 5.21433 30.2014 4.44443 28.5916 3.8845C26.9818 3.32457 25.9495 3.11459 23.9197 3.11459H22.7299L19.7902 10.7611L23.1323 10.5512C23.7272 10.5512 24.2697 10.6387 24.7596 10.8136C25.232 10.9711 25.652 11.1986 25.967 11.4785C26.2644 11.7235 26.4919 12.0035 26.6669 12.3534C26.8243 12.6684 26.9118 13.0184 26.9118 13.4033C26.9118 13.7883 26.8418 14.1207 26.6669 14.4182C26.4919 14.7506 26.2469 15.0306 25.932 15.2581C25.582 15.5205 25.1621 15.748 24.6896 15.9055C24.1997 16.063 23.6747 16.1505 23.1323 16.1505L17.7605 16.0805L19.7902 10.7961H10.6039L0.787598 35.5905H10.1839L14.7858 23.6045H23.0623C23.7972 23.6045 24.4096 23.7095 24.8821 23.8495C25.302 23.9895 25.652 24.1645 25.8795 24.3569C26.0719 24.5319 26.2119 24.7069 26.2819 24.8994C26.3694 25.1268 26.4219 25.3368 26.4219 25.5643V30.0087C26.4219 30.2887 26.4219 30.6037 26.4569 30.9711C26.4919 31.3561 26.5444 31.7585 26.6494 32.1785C26.7544 32.6334 26.9118 33.1058 27.1218 33.5783C27.3318 34.0507 27.6117 34.5232 27.9442 34.9606L28.4516 35.608H39.1953L37.2705 32.9659H37.288V32.9484Z" fill="#666CFF" />
          <path d="M17.8478 1.5923C19.4226 3.46457 19.7376 10.7787 19.7376 10.7787C19.7376 10.7787 12.6159 9.18635 11.0411 7.29659C9.46634 5.42432 9.71131 2.62467 11.6011 1.04987C13.4733 -0.524936 16.273 -0.279967 17.8478 1.6098V1.5923Z" fill="#666CFF" />
        </g>
        <defs>
          <clipPath id="clip0_522_2374">
            <rect width="40" height="35.608" fill="white" />
          </clipPath>
        </defs>
      </svg>
      <CircularProgress disableShrink sx={{ mt: 6 }} />
    </Box>
  )
}

export default FallbackSpinner