import Link from "next/link";
import type { BlogPost } from "@/types/blog";
import { getCmsImageUrl } from "@/utils";

interface NewsListProps {
  blogs?: BlogPost[];
  categorySlug?: string;
  tagSlug?: string;
}

export default function NewsList({ blogs = [], categorySlug, tagSlug }: NewsListProps) {
  // Use blogs from props (already filtered by API)
  const posts = blogs;

  // Additional client-side filtering if needed (though API should handle this)
  if (categorySlug || tagSlug) {
    // If filters are provided but blogs are not pre-filtered, filter here
    // This is a fallback - ideally API should handle filtering
  }

  return (
    <div className="col-lg-8 col-12">
      {posts.map((post, index) => (
        <div
          key={post.slug}
          className={`news-standard-post ${index === posts.length - 1 ? "mb-0" : ""}`}
        >
          <div className="news-image">
            <img
              src={
                post.featuredImage
                  ? getCmsImageUrl(post.featuredImage)
                  : "/assets/img/inner-page/news-details/details-1.jpg"
              }
              alt={post.title}
            />
          </div>
          <div className="news-content">
            <ul className="news-list">
              <li>
                <i className="fa-solid fa-user"></i> By {post.author}
              </li>
              <li>
                <i className="fa-solid fa-calendar-days"></i> {post.publishedAt}
              </li>
              <li>
                <i className="fa-solid fa-comments"></i> {post.commentsCount} Comments
              </li>
            </ul>
            <h3>
              <Link href={`/blog/${post.slug}`}>{post.title}</Link>
            </h3>
            <p>{post.excerpt}</p>
            <Link href={`/blog/${post.slug}`} className="theme-btn">
              VIEW MORE <i className="fa-solid fa-arrow-right"></i>
            </Link>
          </div>
        </div>
      ))}
    </div>
  );
}