---
import ImageCarousel from "@components/ImageCarousel.astro";
import SectionTitle from "@components/SectionTitle.astro";
import MainLayout from "@layouts/MainLayout.astro";

import { getCollection, render } from "astro:content";

import {
  getAllProjectImages,
  getFullExternalURLOfImage,
  getProjectHero
} from "@/lib/utils";

export async function getStaticPaths() {
  const projects = await getCollection("projects", ({ body }) => {
    return body && body.trim().length > 0;
  });

  return projects.map((project) => ({
    params: { slug: project.id },
    props: { project }
  }));
}

const { project } = Astro.props;
const { Content } = await render(project);

const images = getAllProjectImages(project);
const hero = getProjectHero(project);

const seoImage: SiteImage = {
  externalURL: await getFullExternalURLOfImage(hero),
  src: hero.src,
  alt: project.data.images.hero.alt
};
---

<MainLayout
  title={project.data.title}
  description={project.data.description}
  image={seoImage}
>
  <div class="w-full">
    <section id="cta" class="text-white">
      <div class="flex h-64 w-full items-center justify-center">
        <ImageCarousel
          images={images}
          className="absolute -z-40 h-full w-full"
          foreground={true}
          interval={2000}
          transitionDuration="duration-1000"
          quality={50}
          height={256}
          shuffle={true}
        />
        <h1 class="font-header text-4xl uppercase text-shadow-lg/75">
          {project.data.title}
        </h1>
      </div>
    </section>
    <section id="projects" class="bg-white dark:bg-gray-950">
      <div <div class="mx-auto max-w-4xl px-8 py-16 text-center">
        <SectionTitle>{project.data.title}</SectionTitle>

        <Content />
      </div>
    </section>
  </div>
</MainLayout>