---
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 },
    props: { post },
  }));
}
const { post } = Astro.props;
const { Content } = await render(post);

console.log("astro site", Astro.site);
const baseUrl = Astro.site ?? "https://mk8nrc8p-4321.brs.devtunnels.ms";

const pageUrl = new URL(`/es/news/${post.id}`, baseUrl).toString();

---


<style>
  .content h2 {
  font-size: 42px !important;
  background-color: red;
}
</style>

<MainLayout>
  <Fragment slot="head">
  <!-- Título -->
  <title>{post.data.title}</title>

  <!-- Descripción SEO -->
  <meta name="description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />

  <!-- Open Graph (Facebook / WhatsApp / LinkedIn) -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content={post.data.title} />
  <meta property="og:description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />
  <meta property="og:url" content={pageUrl} />
  {post.data.gallery && post.data.gallery.length > 0 && post.data.gallery[0].image && (
    <>
      <meta property="og:image" content={new URL(post.data.gallery[0].image.src, baseUrl)} />
      <meta property="og:image:width" />
      <meta property="og:image:height" />
      <meta property="og:image:type" content={`image/${post.data.gallery[0].image.format}`} />
    </>
  )}
</Fragment>
  <div class="container mx-auto py-16">
    <Header />
  </div>

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

  <div class="container mx-auto">
    {post.data.gallery && <CarouselSection images={post.data.gallery} />}
    <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 />