---
import { ENABLE_LIGHTBOX } from '@/consts'
import * as interfaces from '../../lib/interfaces'
import { filePath } from '../../lib/blog-helpers'
import Caption from './Caption.astro'
import fslightbox from 'fslightbox'
export interface Props {
  block: interfaces.Block
}

const { block }: Props = Astro.props

if (!block.Image) {
  return null
}

let image = ''
if (block.Image.External) {
  image = block.Image.External.Url
} else if (block.Image.File?.Url) {
  image = filePath(new URL(block.Image.File.Url))
}
---

<figure class="image">
  {
    image && (
      <div>
        <div>
          {ENABLE_LIGHTBOX ? (
            <a data-fslightbox href={image} data-type="image">
              <img src={image} alt="Image in a image block" loading="lazy" />
            </a>
          ) : (
            <img src={image} alt="Image in a image block" loading="lazy" />
          )}
        </div>
        <Caption richTexts={block.Image.Caption} />
      </div>
    )
  }
</figure>

<style>
  .image {
    display: flex;
    margin: 0.2rem auto 0;
  }
  .image > div {
    margin: 0 auto;
  }
  .image > div > div {
  }
  .image > div > div img {
    display: block;
    max-width: 100%;
  }
</style>
