---
import * as 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
}

const { image } = Astro.props

let imageLoaded = false

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

checkBackground()
---

{
  image &&
    (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>
    ) : (
      <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>
    ))
}

<style lang="sass">
  @use '../../design/site.sass' as design

  :root
    color-scheme: light dark
    background-color: light-dark(design.$light-background, design.$dark-background)
    transition: background-color 0.6s ease-out
</style>