---
import BaseLayout from '@/layouts/BaseLayout.astro'
import { getCollection } from 'astro:content'
import { optimizeSliderImages, optimizeSliderThumbs } from '@/libs/image'
import Section from '@/components/Section.astro'
import { SwiperWithThumbs } from '@/components/swiper/SwiperWithThumbs'
import Header from '@/components/header/Header.astro'

export const getStaticPaths = async () => {
  const coaches = await getCollection('coaches')
  return coaches.map(({ slug, ...props }) => ({ params: { slug }, props }))
}

const { data, render } = Astro.props
const { gallery, cover } = data
const { Content } = await render()
const galleryWithCover = gallery ? [cover, ...gallery] : undefined
const [thumbs, optimizedGallery] = galleryWithCover
  ? await Promise.all([
      optimizeSliderThumbs(
        galleryWithCover.map((src, index) => ({ src, alt: `gallery-thumb-${index}` }))
      ),
      optimizeSliderImages(
        galleryWithCover.map((src, index) => ({ src, alt: `gallery-slide-${index}` }))
      ),
    ])
  : [undefined, undefined]
---

<BaseLayout title={data.name}>
  <Header />
  {
    optimizedGallery && (
      <Section>
        <SwiperWithThumbs
          swiperClassName="h-[540px]"
          client:load
          images={optimizedGallery}
          thumbs={thumbs}
        />
      </Section>
    )
  }

  <Section>
    <Content />
  </Section>
</BaseLayout>