import React from "react";
import Link from "next/link";
import Image from "next/image";
import {
  getRecentPosts,
  getCategories,
  formatDate,
  type BlogPost,
} from "@/data/blog";
import BlogSearch from "./BlogSearch";

/**
 * Sticky single-post sidebar: Search, Recent Posts, Categories and a CTA card.
 * Styling lives in SingleBlog's scoped <style> block (dm-blog-* classes).
 */
export default function BlogSidebar({ current }: { current?: BlogPost }) {
  const recent = getRecentPosts(5)
    .filter((p) => p.slug !== current?.slug)
    .slice(0, 4);
  const categories = getCategories();

  return (
    <aside className="dm-blog-sidebar" aria-label="Blog sidebar">
      {/* Search */}
      <section className="dm-blog-widget">
        <h2 className="dm-blog-widget-title">Search</h2>
        <BlogSearch />
      </section>

      {/* Recent Posts */}
      <section className="dm-blog-widget">
        <h2 className="dm-blog-widget-title">Recent Posts</h2>
        <ul className="dm-blog-recent">
          {recent.map((p) => (
            <li key={p.slug}>
              <Link href={`/blog/${p.slug}`} className="dm-blog-recent-item">
                <span className="dm-blog-recent-thumb">
                  <Image
                    src={p.image}
                    alt={p.title}
                    fill
                    sizes="62px"
                    style={{ objectFit: "cover" }}
                  />
                </span>
                <span className="dm-blog-recent-meta">
                  <span className="dm-blog-recent-title">{p.title}</span>
                  <time dateTime={p.date} className="dm-blog-recent-date">
                    {formatDate(p.date)}
                  </time>
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </section>

      {/* Categories */}
      <section className="dm-blog-widget">
        <h2 className="dm-blog-widget-title">Categories</h2>
        <ul className="dm-blog-categories">
          {categories.map((c) => (
            <li key={c.name}>
              <Link href="/blog" className="dm-blog-category-item">
                <span>{c.name}</span>
                <span className="dm-blog-category-count">{c.count}</span>
              </Link>
            </li>
          ))}
        </ul>
      </section>

      {/* CTA Card */}
      <section className="dm-blog-widget dm-blog-cta-card">
        <h2 className="dm-blog-cta-title">Planning delivery routes?</h2>
        <p className="dm-blog-cta-text">
          Talk to us about reducing wasted distance, missed windows, and avoidable
          vehicle time.
        </p>
        <Link href="/contact" className="dm-blog-cta-btn">
          Contact Us
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <line x1="5" y1="12" x2="19" y2="12" />
            <polyline points="12 5 19 12 12 19" />
          </svg>
        </Link>
      </section>
    </aside>
  );
}