"use client";

import { useState } from "react";
import BlogCard from "./BlogCard";

export default function BlogList({ posts }: { posts: any[] }) {
  const INITIAL_COUNT = 6;
  const [visibleCount, setVisibleCount] = useState(INITIAL_COUNT);

  const showMore = () => {
    setVisibleCount(posts.length); // show all
  };

  return (
    <>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-[30px] mt-12">
        {posts.slice(0, visibleCount).map((post) => (
          <BlogCard key={post.id} post={post} />
        ))}
      </div>

      {visibleCount < posts.length && (
        <div className="text-center mt-14">
          <button
            onClick={showMore}
            className="
              inline-flex items-center gap-2 mt-8
              border border-[#202020]/50 px-6 py-3 rounded text-lg font-medium
              hover:bg-black text-[#202020] hover:text-white transition cursor-pointer
            "
          >
            Explore More
          </button>
        </div>
      )}
    </>
  );
}