import { useMemo, useCallback } from "react";
import { motion } from "motion/react";
import { PostCard } from "../PostCard";
import { PostCardModel } from "../../../utils/feedMapper";

interface FeedListProps {
  posts: PostCardModel[];
  loadingMore: boolean;
  error: string | null;
  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
  onDelete: (postId: string) => void;
}

export function FeedList({ posts, loadingMore, error, onScroll, onDelete }: FeedListProps) {
  const getAnimationDelay = useCallback((index: number) => {
    return Math.min(index * 0.1, 1);
  }, []);

  const renderedPosts = useMemo(() => {
    return posts.map((post, index) => (
      <motion.div
        key={post.id}
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: getAnimationDelay(index) }}
      >
        <PostCard {...post} onDelete={onDelete} />
      </motion.div>
    ));
  }, [posts, onDelete, getAnimationDelay]);

  return (
    <div
      className="feed-scroll flex-1 overflow-y-auto px-4 pb-56"
      onScroll={onScroll}
    >
      <div className="pt-6">
        {renderedPosts}

        {loadingMore && (
          <div className="flex items-center justify-center mt-4 mb-4">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#ff9be0]"></div>
          </div>
        )}

        {error && (
          <div className="text-red-500 text-center mt-4 mb-4">{error}</div>
        )}
      </div>
    </div>
  );
}
