---
import Layout from '@/layouts/Layout.astro';
import LinkButton from '@/components/link-button';
import { getCollection } from 'astro:content';
import { sortContentByDate } from '@/utils/sorts';
import { getLangFromUrl } from '@/i18n/utils';
import PostItemList from '@/components/post-items-list';
import Random from '@/components/random.astro';

const pageData = {
  title: 'juancmandev',
  description:
    'Welcome to my domain, stranger. I am juancmandev; Web Developer, Linux enthusiast, and privacy defender.',
};

const allPosts = await getCollection('blog', ({ data }) => data.draft !== true);
const allEnPosts = allPosts.map((post) => {
  const [lang, id] = post.id.split('/');

  if (lang !== 'es')
    return {
      ...post,
      id: id.split('.')[0],
    };
  else null;
});
sortContentByDate(allEnPosts);
const last3Blogs = allEnPosts.slice(0, 3);

const lang = getLangFromUrl(Astro.url);
---

<Layout {...pageData}>
  <div class='prose prose-invert max-w-[800px] mx-auto'>
    <h1 class='text-primary'>Welcome to my domain, stranger.</h1>
    <!-- <Random /> -->
    <p>
      I am <strong class='text-primary'>Juan Manzanero</strong>; <strong
        >Web Developer</strong
      >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
    </p>
    <p>
      This is my <strong>website</strong>, a piece of the Internet that I could
      call my <strong>home base</strong>. Here, I share my passion about open
      source projects and other topics.
    </p>
    <section>
      <h2>Latest posts</h2>
      <PostItemList
        items={last3Blogs}
        lang={lang}
      />
      <LinkButton
        variant='secondary'
        href='/blog'
        className='no-underline'
        >More posts</LinkButton
      >
    </section>
  </div>
</Layout>