"use client";

import { motion } from "motion/react";
import { PostCard } from "./PostCard";
import type { PostMeta } from "@/lib/posts";

const listVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.07,
      delayChildren: 0.15,
    },
  },
};

interface PostListProps {
  posts: PostMeta[];
}

export function PostList({ posts }: PostListProps) {
  return (
    <motion.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-8">
      {posts.map((post) => (
        <li key={post.slug}>
          <PostCard {...post} index={posts.indexOf(post)} />
        </li>
      ))}
    </motion.ul>
  );
}
