---
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",
    },
  },
};

const textToEncode = `${entry.data.title}\r\n\r\n${Astro.url.toString()} por @arielcg@mastodon.social`;

const mastodonShareUrl = `https://share.joinmastodon.org/#text=${encodeURIComponent(textToEncode)}`;
---

<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>
    &nbsp;·&nbsp;
    <a href={mastodonShareUrl} rel="noopener noreferrer">Compartir en Mastodon</a>
  </p>
</Layout>

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

  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  small {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: hsl(209, 20%, 50%);
  }

  time {
    font-style: italic;
    font-weight: 500;
  }

  .tags {
    display: inline-flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    margin-left: 0.25rem;
  }

  .tags li {
    display: inline;
  }

  .tags a {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background-color: rgba(0, 153, 255, 0.1);
    color: v.$accentDark;
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: v.$monoFontStack;
    text-decoration: none;
    box-shadow: none !important;

    &:hover {
      background-color: rgba(0, 153, 255, 0.2);
      border-color: v.$accent;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    &:focus {
      outline: 3px solid v.$accent;
      outline-offset: 2px;
      background-color: rgba(0, 153, 255, 0.2);
      box-shadow: none !important;
    }
  }
</style>