---
import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro";
import type { GetStaticPaths } from "astro";
import { getCollection } from "astro:content";

export const getStaticPaths = (async () => {
  const programmingEntries = await getCollection("programming");
  return programmingEntries.map((entry) => ({
    params: {
      project: entry.slug,
    },
    props: { entry },
  }));
}) satisfies GetStaticPaths;

const project = Astro.props.entry;
const { Content } = await project.render();
const { title, date, technologies, website, repository } = project.data;
---

<BaseLayout {title}>
  <ContainerLayout>
    <TextContentLayout>
      <h1
        class="mb-4 text-center font-serif text-4xl font-light tracking-wide text-gray-600 underline decoration-yellow-400 decoration-2 underline-offset-8"
      >
        {title}
      </h1>

      <p class="mx-auto mb-4 text-center text-sm text-gray-500">
        {
          new Date(date).toLocaleDateString("en-US", {
            month: "long",
            year: "numeric",
          })
        }
      </p>

      <div class="mb-8 flex flex-wrap justify-center">
        {
          technologies.map((technology: string) => (
            <span class="m-1 rounded-full bg-gray-200 px-3 py-0.5 text-sm font-semibold text-gray-600">
              {technology}
            </span>
          ))
        }
      </div>

      <div class="mb-6 flex flex-col items-center justify-center sm:flex-row">
        {
          website && (
            <a
              href={website}
              target="_blank"
              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
            >
              🖥️ Visit website
            </a>
          )
        }

        {
          repository && (
            <a
              href={repository}
              target="_blank"
              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
            >
              📦 Code on GitHub
            </a>
          )
        }
      </div>
      <div
        class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h2:font-light prose-a:text-teal-600 prose-a:no-underline prose-a:duration-100 hover:prose-a:text-teal-500 hover:prose-a:underline before:prose-code:content-[''] after:prose-code:content-['']"
      >
        <Content />
      </div>
    </TextContentLayout>
  </ContainerLayout>
</BaseLayout>