import Link from "next/link";
import { fetchCategories, fetchRecentBlogs, fetchPopularTags } from "@/api/blogsApi";
import { getCmsImageUrl } from "@/utils";

interface SidebarProps {
  searchQuery?: string;
}

export default async function Sidebar({ searchQuery }: SidebarProps) {
  // Fetch data from API
  const [categoriesResponse, recentBlogsResponse, tagsResponse] = await Promise.all([
    fetchCategories(),
    fetchRecentBlogs(5),
    fetchPopularTags(10),
  ]);

  const categories = categoriesResponse.data;
  const recentPosts = recentBlogsResponse.data;
  const tags = tagsResponse.data;

  return (
    <div className="col-lg-4 col-12">
      <div className="main-sideber">
        {/* Search Widget */}
        <div className="news-sideber-box">
          <div className="search-widget">
            <form action="/blog" method="GET">
              <input
                type="text"
                name="search"
                placeholder="Search Blog"
                defaultValue={searchQuery || ""}
              />
              <button type="submit">
                <i className="fa-solid fa-magnifying-glass"></i>
              </button>
            </form>
          </div>
        </div>
        {/* Categories */}
        <div className="news-sideber-box">
          <div className="wid-title">
            <h3>Categories</h3>
          </div>
          <div className="news-widget-categories">
            <ul>
              {categories.map((category) => {
                const postCount = category.postCount || 0;
                return (
                  <li key={category.slug}>
                    <Link href={`/blog/category/${category.slug}`}>
                      <i className="fa-solid fa-chevrons-right"></i> {category.name}
                    </Link>
                    <span>({String(postCount).padStart(2, "0")})</span>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
        {/* Recent Post */}
        <div className="news-sideber-box">
          <div className="wid-title">
            <h3>Recent Post</h3>
          </div>
          <div className="recent-post-area">
            {recentPosts.map((post) => (
              <div key={post.slug} className="recent-items">
                <div className="recent-thumb">
                  <img
                    src={getCmsImageUrl(post.thumbnail) || "/assets/img/inner-page/news-details/details-1.jpg"}
                    alt={post.title}
                  />
                </div>
                <div className="recent-content">
                  <h6>
                    <Link href={`/blog/${post.slug}`}>{post.title}</Link>
                  </h6>
                  <ul>
                    <li>{post.publishedAt}</li>
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* Tag Cloud */}
        <div className="news-sideber-box mb-0">
          <div className="wid-title">
            <h3>Tag Cloud</h3>
          </div>
          <div className="news-widget-categories">
            <div className="tagcloud">
              {tags.map((tag) => (
                <Link key={tag.slug} href={`/blog/tag/${tag.slug}`}>
                  {tag.name}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}