"use client";
import { useEffect, useState } from "react";
import BlogLists from "@components/top-level/blog-lists";
import Loading from "./loading";
import { useAppContext } from "@context/index";
import styles from "./container.module.css";

export default function BlogContainer({ blogs }) {
  const { input } = useAppContext();
  const [filteredBlogs, setFilteredBlogs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    handleBlogs();
  }, [input, blogs]); // Added 'blogs' as a dependency

  const handleBlogs = () => {
    setLoading(true); // Set loading state to true when starting to filter

    const filtered = blogs.filter((blog) => {
      const lowerCaseBlogTitle = blog.title.toLowerCase();
      const lowerCaseInput = input.toLowerCase();
      return lowerCaseBlogTitle.includes(lowerCaseInput);
    });

    setFilteredBlogs(filtered);
    setLoading(false); // Set loading state to false when filtering is complete
  };

  return (
    <>
      {loading ? (
        <Loading />
      ) : filteredBlogs.length ? (
        <BlogLists
          title="Lifestyle"
          description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
          blogs={filteredBlogs}
        />
      ) : (
        <h2 className={styles.center}>No data found</h2>
      )}
    </>
  );
}