"use client";

import Loader from "@/components/loaders/Loader";
import { useRecentBlogQuery } from "@/services/hooks/blog";
import { useEffect } from "react";
import CardBlog from "./CardBlog";

type ListOfRecentBlogProps = {
  currentBlogId?: number;
};

export default function ListOfRecentBlog({ currentBlogId }: ListOfRecentBlogProps) {
  const recentBlogQuery = useRecentBlogQuery();

  useEffect(() => {
    if (!!currentBlogId) {
      recentBlogQuery._fetch({
        currentBlogId,
      });
    }
  }, [currentBlogId]);

  if (recentBlogQuery.isFetching) {
    return (
      <div className="mt-5 w-full">
        <Loader />
      </div>
    );
  }

  if (recentBlogQuery.data.length <= 0) return <></>;

  return (
    <>
      <div className="post-simple-group">
        <div className="post-simple-group-title">
          <h6>Recent Posts</h6>
        </div>
        <div className="post-simple-group-divider"></div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {recentBlogQuery.data.map((blog) => (
            <CardBlog key={blog.slug} data={blog} colorPreset={2} isDescriptionVisible={false} />
          ))}
        </div>
      </div>
    </>
  );
}