// import '../styles/Background.sass'
// import { Show, createSignal } from 'solid-js'
// import fs from 'fs'
// import webpPath from '../images/background.webp'
// import avifPath from '../images/background.avif'
// import noBackground from '../images/no-background.webp'

// interface Props {
//   image?: boolean
//   color?: string
// }

// let [imageLoaded, setImageLoaded] = createSignal(false)

// const checkBackground = () => {
//   if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
//     setImageLoaded(true)
//   } else {
//     setImageLoaded(false)
//   }
// }

// export default (props: Props) => {
//   checkBackground()

//   return (
//     <>
//       <Show when={props.image}>
//         <Show when={imageLoaded()}>
//           <picture class="fullscreen">
//             <source srcset={avifPath.src} type="image/avif" />
//             <source srcset={webpPath.src} type="image/webp" />
//             <source srcset={noBackground.src} type="image/webp" />
//             <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
//           </picture>
//         </Show>
//         <Show when={!imageLoaded()}>
//           <picture class="fullscreen">
//             <source srcset={noBackground.src} type="image/webp" />
//             <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
//           </picture>
//         </Show>
//       </Show>

//       <Show when={!props.image}>
//         <div style={{ background: props.color }} class="fullscreen" />
//       </Show>
//     </>
//   )
// }