"use client";

import { useInView } from "motion/react";
import { useRef, useState } from "react";

import { useMediaQuery } from "@/hooks/useMediaQuery";
import BlogCard from "./blog-card";
import { BlogPost } from "../blog/types";

type BlogContentProps = {
  posts: BlogPost[];
};

const positions = [0, "2.5%", "5%"];

const BlogContent = ({ posts }: BlogContentProps) => {
  const ref = useRef<HTMLDivElement>(null);
  const isMobile = useMediaQuery("(max-width: 768px)");
  const isInView = useInView(ref, {
    once: true,
    amount: isMobile ? 0.3 : 0.9,
  });

  const [animationComplete, setAnimationComplete] = useState(false);

  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 my-5 md:my-10 relative" ref={ref}>
      {posts.map((post, i, arr) => (
        <BlogCard
          post={post}
          position={positions[i]}
          i={i}
          isInView={isInView}
          arr={arr}
          animationComplete={animationComplete}
          setAnimationComplete={setAnimationComplete}
          key={post.slug}
        />
      ))}
    </div>
  );
};

export default BlogContent;