---
import { YouTube } from 'astro-embed';
import MainLayout from "../../../layouts/MainLayout.astro";
import Header from "../../../components/Header.astro";
import CarouselSection from "../../../components/section/CarouselSection.astro";
import { Image } from "@unpic/astro";
import { getCollection, render } from "astro:content";
import TitleSection from "../../../components/section/TitleSection.astro";
import FooterSection from '../../../components/section/FooterSection.astro';
export const prerender = true;
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const posts = await getCollection("news");
  return posts.map((post) => ({
    params: { id: post.id, locale: post.data.locale },
    props: { post },
  }));
}

const { locale } = Astro.params;

// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);

const routeTranslations = {
  news: {
    es: "noticias",
    en: "news",
    fr: "actualites",
    pt: "noticias",
    de: "nachrichten",
  }
};

const baseSlug = routeTranslations.news[locale] || routeTranslations.news.en;

---
</style>

<MainLayout
  title={post.data.title}
  description={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`}
  image={post.data.thumbnail}
  url={new URL(`/${locale}/${"news"}/${post.id}`, Astro.site)}
>
  <div class="container mx-auto md:py-16 py-8">
    <Header />
  </div>

  <TitleSection title={post.data.title} />

  <div class="container mx-auto">
    {post.data.gallery?.length ? ( <CarouselSection images={post.data.gallery} />) : post.data.thumbnail ? (<Image src={post.data.thumbnail} alt="" /> ) : null}
    <div class="grid md:grid-cols-10">
        <div class="md:col-span-7 content bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
          <Content />
        </div>
      <div class="md:col-span-3 bg-tertiary md:sticky top-0 h-fit">
        { post.data.youtube && (
          <YouTube id={post.data.youtube} />

        )}

        {post.data.gallery && (
          post.data.gallery.map(galleryImage => (
            <Image src={galleryImage.image} alt={galleryImage.text} />
          ))
        )}

	    </div>
    </div>
  </div>
</MainLayout>

<FooterSection />
