import Image from "next/image";
import Link from "next/link";
import { blogCategories, blogTags, latestNewsItems } from "@/data/blogData";

type BlogSidebarProps = {
  rootClassName?: string;
};

export default function BlogSidebar({ rootClassName = "side-bar m-0" }: BlogSidebarProps) {
  return (
    <div
      className={rootClassName}
      data-aos="fade-right"
      data-aos-duration="900"
      data-aos-delay="300"
    >
      <div className="form-widget2">
        <form className="comment-form2">
          <div className="form-group">
            <input type="text" name="search" placeholder="Search" required />
            <button type="submit" aria-label="Search blog">
              <Image
                src="/assets/images/icon/search.svg"
                alt="Search submit icon"
                width={18}
                height={18}
              />
            </button>
          </div>
        </form>
      </div>

      <div className="side-widget categorie-widegt">
        <h1 className="side-bar-title">Categories</h1>
        <ul className="blog-detail-list">
          {blogCategories.map((category) => (
            <li key={category.id}>
              <Link href={category.path}>{category.label}</Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="side-widget news-widegt">
        <h1 className="side-bar-title">Latest News</h1>
        {latestNewsItems.map((news) => (
          <div className="news-content" key={news.id}>
            <Link href={news.path}>
              <Image src={news.image} alt={news.imageAlt} width={96} height={96} />
            </Link>
            <span className="date">{news.date}</span>
            <h2 className="title">
              <Link href={news.path}>{news.title}</Link>
            </h2>
          </div>
        ))}
      </div>

      <div className="side-widget tag-widget">
        <h1 className="side-bar-title">Tags</h1>
        <ul className="tag-list m-0">
          {blogTags.map((tag) => (
            <li key={tag.id}>
              <Link href={tag.path}>{tag.label}</Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="side-widget form-widget2">
        <p>
          Stay ahead of the curve with the latest product updates, expert tips
        </p>
        <form className="comment-form3">
          <div className="form-group">
            <input
              type="email"
              name="email"
              placeholder="Enter your email"
              required
            />
            <button type="submit" className="btn-style1 v2">
              Subscribe now
              <span>
                <Image
                  src="/assets/images/icon/arrow.svg"
                  alt="Arrow icon for subscribe button"
                  width={16}
                  height={16}
                />
              </span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}