---
import type { Post } from '@lib/directusTypes';

import LargeBlogLeftCard from '@components/cards/LargeBlogLeftCard.astro';
import LargeBlogRightCard from '@components/cards/LargeBlogRightCard.astro';

interface Props {
  posts: Post[];
}

const { posts } = Astro.props;
---

<section class="smooth-reveal flex flex-col gap-4">
  {posts.map((post, index) => index % 2 === 0 ? (
  <LargeBlogLeftCard
    title={post.title}
    subTitle={post.description}
    url={`/blog/${post.slug}`}
    img={post.image}
    imgAlt={post.image_alt}
  />
  ) : (
  <LargeBlogRightCard
    title={post.title}
    subTitle={post.description}
    url={`/blog/${post.slug}`}
    single={!post.image_second}
    imgOne={post.image}
    imgOneAlt={post.image_alt}
    imgTwo={post?.image_second}
    imgTwoAlt={post?.image_second_alt}
  />
  ))}
</section>