---
import MainLayout from "../../../layouts/MainLayout.astro";
import { getBlogPosts } from "../../../content/config";
//@ts-ignore
import { dictionary } from "../../../i18n/dictionary";
import SinglePage from "../../../layouts/SinglePage.astro";
const { title, description } = dictionary[Astro.currentLocale];

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../../components/ui/card";

export async function getStaticPaths() {
  return ["en", "fr", "cs", "de"].map((lang) => {
    return { params: { lang } };
  });
}
var posts = await getBlogPosts();
var filtered_posts = posts.filter(
  (post) => post.data.language == Astro.currentLocale,
);
---

<MainLayout title={title} description={description} lang={Astro.currentLocale}>
  <SinglePage>
    <div class="grid lg:flex gap-2">
      {
        filtered_posts.map((post) => (
          <div>
            <a href={post.blog_slug}>
              <Card>
                <CardHeader>
                  <img src={post.data.image.url} alt={post.data.image.alt} class="rounded-md">
                  <span class="py-2"/>
                  <CardTitle>{post.data.title}</CardTitle>
                  <CardDescription>
                    <p>{post.data.author} • {post.data.publishDate.toLocaleString(Astro.currentLocale)}</p>
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p>{post.data.description}</p>
                </CardContent>
              </Card>
            </a>
          </div>
        ))
      }
    </div>
  </SinglePage>
</MainLayout>