"use client";

import { m, useReducedMotion } 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) {
  const shouldReduceMotion = useReducedMotion();

  return (
    <m.ul
      variants={shouldReduceMotion ? undefined : listVariants}
      initial={shouldReduceMotion ? false : "hidden"}
      animate="visible"
      className="space-y-6"
    >
      {posts.map((post, index) => (
        <li key={post.slug}>
          <PostCard {...post} index={index} />
        </li>
      ))}
    </m.ul>
  );
}