---
import Layout from "@layouts/Layout.astro";
import Max from "@components/Max.astro";
import { getCollection } from "astro:content";
import {
  filterCollection,
  useTranslatedPath,
  useTranslations,
} from "@i18n/utils";
import { getLocale } from "astro-i18n-aut";
import HeroCard from "@components/HeroCard.astro";
import SmallCard from "@components/SmallCard.astro";
import LinkCard from "@components/LinkCard.astro";
import ArrowA from "@components/arrows/ArrowA.astro";
import ArrowB from "@components/arrows/ArrowB.astro";
import SmallGrid from "@components/SmallGrid.astro";

const projects = filterCollection(
  await getCollection("projects"),
  getLocale(Astro.url),
);

const t = useTranslations(Astro.url);
const tp = useTranslatedPath(Astro.url);

const featuredProject = projects.find((project) => project.data?.featured);
const otherProjects = projects
  .filter((project) => featuredProject !== project)
  .sort((a) => (a?.data?.icon ? -1 : 1))
  .slice(0, 3);

const posts = filterCollection(
  await getCollection("blog"),
  getLocale(Astro.url),
);
const photos = filterCollection(
  await getCollection("photos"),
  getLocale(Astro.url),
);
const list = [...posts, ...photos];
list.sort((a, b) => {
  return a.data.date > b.data.date ? -1 : 1;
});

const featuredPost = list.find((post) => post.data?.featured);
const otherPosts = list.filter((post) => featuredPost !== post).slice(0, 3);
---

<Layout title="Max Richter">
  <Max />
  <section class="relative my-8">
    <span class="i-tabler-circle-arrow-right-thin"></span>
    <ArrowA />
    {featuredProject && <HeroCard post={featuredProject} />}
    <SmallGrid>
      {
        otherProjects.length > 0 &&
          otherProjects.map((project) => <SmallCard post={project} />)
      }
      <LinkCard
        link={tp("/projects")}
        title={t("more-projects")}
        icon="circle-arrow-right"
      />
    </SmallGrid>
  </section>

  <section class="relative my-8">
    {featuredPost && <HeroCard post={featuredPost} />}

    <ArrowB />
    <SmallGrid>
      {
        otherPosts.length > 0 &&
          otherPosts.map((post) => <SmallCard post={post} />)
      }
      <LinkCard link={tp("/blog")} title={t("more-posts")} />
    </SmallGrid>
  </section>
</Layout>