import { useEffect } from "react";
import { calender } from "../utils";
import Link from "next/link";
import { BlogData } from "@/utils/constant.utils";

const BlogSidebar = ({ currentSlug }) => {
  useEffect(() => {
    calender();
  }, []);

  const relatedBlogs = BlogData?.filter((b) => b.slug !== currentSlug) || [];

  const randomRelated =
    relatedBlogs.length > 0
      ? relatedBlogs[Math.floor(Math.random() * relatedBlogs.length)]
      : null;

  return (
    <div className="col-lg-12 col-md-12 blog-sidebar mt-4">
      {/* Categories */}
      <div className="widget-items mb-40 categories">
        <div className="widget-title">
          <h2>Categories</h2>
        </div>
        <div className="catagory-item">
          <ul>
            {BlogData.map((blog) => (
              <li className="hr-3" key={blog.id}>
                <Link
                  href={`/${blog.slug}`}
                  className={blog.slug === currentSlug ? "current" : ""}
                >
                  {blog.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {randomRelated && (
        <div className="widget-items mb-40 related-post">
          <div className="widget-title">
            <h2>Related Blog</h2>
          </div>
          <div className="widget-recent-post-single" key={randomRelated.id}>
            <Link href={`/${randomRelated.slug}`}>
              <img
                src={randomRelated.image}
                alt={randomRelated.title}
                className="mb-3 w-100"
                style={{ borderRadius: "8px" }}
              />
            </Link>
            <div className="rpost-content mt-2">
              <Link href={`/${randomRelated.slug}`}>
                <h5>{randomRelated.title}</h5>
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default BlogSidebar;