import React from "react";
import Link from "next/link";
import { BlogItem } from "./BlogCard";

export default function BlogSidebar({
  blogs,
  currentSlug,
}: {
  blogs: BlogItem[];
  currentSlug: string;
}) {
  const recentPosts = blogs
    .filter((b) => b.slug !== currentSlug)
    .sort((a, b) => new Date(b.datePosted).getTime() - new Date(a.datePosted).getTime())
    .slice(0, 5);

  const categoryCounts = blogs.reduce<Record<string, number>>((acc, blog) => {
    acc[blog.category] = (acc[blog.category] || 0) + 1;
    return acc;
  }, {});

  return (
    <div className="blog-sidebar">
      {/* Recent Posts */}
      <div className="card border-0 shadow-sm mb-4">
        <div className="card-body">
          <h5 className="card-title mb-4">Recent Articles</h5>
          <ul className="list-unstyled mb-0">
            {recentPosts.map((post) => (
              <li key={post.id} className="d-flex align-items-start mb-3 pb-3 border-bottom">
                {post?.coverImage && post?.coverImage.trim() !== "" ? (
                  <img
                    src={post.coverImage}
                    alt={post.title}
                    className="rounded me-3 flex-shrink-0"
                    style={{ width: "64px", height: "64px", objectFit: "cover" }}
                  />
                ) : (<></>)}
                <div>
                  <Link
                    href={post.blogUrl}
                    className="text-dark fw-semibold d-block mb-1 sidebar-post-title"
                  >
                    {post.title}
                  </Link>
                  <small className="text-muted">
                    {new Date(post.datePosted).toLocaleDateString("en-US", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                    })}
                  </small>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Categories */}
      <div className="card border-0 shadow-sm mb-4">
        <div className="card-body">
          <h5 className="card-title mb-4">Categories</h5>
          <ul className="list-unstyled mb-0">
            {Object.entries(categoryCounts).map(([category, count]) => (
              <li
                key={category}
                className="d-flex justify-content-between align-items-center py-2 border-bottom"
              >
                <Link href="/blog" className="text-dark">
                  {category}
                </Link>
                <span className="badge bg-light text-dark">{count}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* CTA */}
      {/* <div className="card border-0 shadow-sm bg-primary text-white">
        <div className="card-body text-center py-4">
          <h5 className="mb-2">Need Magento Help?</h5>
          <p className="mb-3 small">
            Talk to our certified Magento developers about your project.
          </p>
          <Link href="/service/cms-ecommerce/magento-development" className="btn btn-light btn-sm">
            Get In Touch
          </Link>
        </div>
      </div> */}
    </div>
  );
}