---
import { changeLanguage } from "i18next";
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Toc from "@components/Toc/Toc";
import Card from "@components/Card.astro";
import Button from "@components/Button/Button.astro";

changeLanguage("es");

export const getStaticPaths = (async () => {
    const entries = await getCollection("portafolio");
    return entries.map((entry) => ({
        params: { slug: entry.slug },
        props: entry,
    }));
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const entry = Astro.props;
const { Content, headings } = await entry.render();
---

<Layout title={entry.data.title}>
  <h1>{entry.data.title}</h1>
  <Card className="w-lg-50 mx-auto">
    <div class="project-specs grid">
      <div class="project-spec-property">Timeframe:</div>
      <div class="project-spec-value">{entry.data.timeframe}</div>

      <div class="project-spec-property">Repo:</div>
      <div class="project-spec-value">{entry.data.links?.url ?? 'Private'}</div>

      <div class="project-spec-property">Website:</div>
      <div class="project-spec-value">
        {entry.data.links?.repo ?? 'Private'}
      </div>

      <div class="project-spec-property">Technologies:</div>
      <div class="project-spec-value">
        <ul>
          {entry.data.technologies.map((item) => <li>{item}</li>)}
        </ul>
      </div>
    </div>
  </Card>

  <Toc headings={headings} />

  <Content />

  <div
    class="position-fixed bottom-0"
    style={{ top: 'unset', left: 'unset', bottom: '5%', right: '5%' }}
  >
    <Button className="btn-back">Go back</Button>
  </div>
</Layout>

<style is:global lang="scss">
  img {
    margin: 0 auto var(--prj-spacing-2) auto;
    display: block;
  }

  .project-specs.grid {
    --prj-columns: 0.2fr 1fr;

    .project-spec-property {
      font-weight: bold;
    }
  }
</style>

<script>
  document.addEventListener('astro:page-load', () => {
    document.querySelector('.btn-back')?.addEventListener('click', () => {
      history.back();
    });
  });
</script>