---
import Layout from "@/layouts/Layout.astro";
import { getCollection, render } from "astro:content";
import { type GetStaticPaths } from "astro";

interface Props {
  entry: any;
}

export const getStaticPaths: GetStaticPaths = async () => {
  const entries = await getCollection("blog");
  return entries.map((entry: any) => ({
    params: { id: entry.id },
    props: { entry },
  }));
};

const { entry } = Astro.props;
const { Content } = await render(entry);
const formattedDate = new Date(entry.data.publishedAt).toLocaleDateString(
  "es-ES",
  {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  },
);

const schema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: entry.data.title,
  datePublished: entry.data.publishedAt.toISOString(),
  keywords: entry.data.tags || [],
  author: {
    "@type": "Person",
    name: "Ariel Costas Guerrero",
  },
  publisher: {
    "@type": "Person",
    name: "Ariel Costas Guerrero",
    url: "https://www.costas.dev",
    image: {
      "@type": "ImageObject",
      url: "https://www.costas.dev/favicon.png",
    },
  },
};
---

<Layout title={entry.data.title} description={entry.data.description}>
  <script
    is:inline
    type="application/ld+json"
    slot="head-jsonld"
    set:html={JSON.stringify(schema)}
  />

  <h1>{entry.data.title}</h1>
  <small>
    Publicado el
    <time datetime={entry.data.publishedAt.toISOString()}>
      {formattedDate}
    </time>
    {entry.data.tags && entry.data.tags.length > 0 && (
      <>
        • Etiquetas:
        <ul class="tags">
          {entry.data.tags.map((tag: string) => (
            <li><a href={`/blog/?tag=${encodeURIComponent(tag)}`}>{tag}</a></li>
          ))}
        </ul>
      </>
    )}
  </small>

  <Content />

  <p>
    <a href="/blog/">Volver al blog</a>
  </p>
</Layout>

<style lang="scss">
  @use "../../styles/variables" as v;
  @use "sass:color";

  .tags {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
  }

  .tags li {
    display: inline;
  }

  .tags a {
    // Estilo de enlace normal, siguiendo los estilos predefinidos en Layout.astro
    color: v.$accentDark;
    font-size: 0.85rem;
    font-family: v.$monoFontStack;
    text-decoration: none;
    box-shadow: 0 1px v.$accent;
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 2px v.$accentDark;
    }

    &:focus {
      color: v.$accentDark;
      outline: none;
      background-color: v.$secondary;
      box-shadow: 0 4px #0b0c0c;
    }
  }

  /* Estilos para la información de la publicación */
  small {
    display: block;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: color.adjust(v.$dark, $lightness: 30%);
  }

  time {
    font-style: italic;
  }
</style>