import React from "react";
import Link from "next/link";
import Image from "next/image";
import { URL } from "../url";
import ShareNew from "./ShareNew";

function HomePageNewComponent({ newsList, categoriesList, params }) {
  const resolvedParams = params || {};
  const activeTab = resolvedParams?.slug || "";

  const tabs = [
    {
      slug: "",
      name: "All News",
      icon: "/images/fire-element.png",
    },
  ];

  const allcategory = [...tabs, ...categoriesList];
  const newsDocs = newsList?.docs || [];

  return (
    <div className="container-fluid mt-3">
      <div className="row">
        {/* ===== LEFT SIDEBAR ===== */}
        <div className="col-md-2 border-end d-none d-md-block">
          <ul className="nav flex-column nav-pills">
            {allcategory.map((tab) => (
              <li key={tab.slug} className="nav-item my-1">
                <Link
                  href={`/${tab.slug}`}
                  className={`nav-link ${
                    activeTab === tab.slug ? "active" : ""
                  }`}
                >
                  <Image
                    src={tab.icon || URL.API_BASE_URL + tab.image}
                    alt={tab.name}
                    width={20}
                    height={20}
                  />
                  <span className="ms-2">{tab.name}</span>
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* ===== NEWS LIST ===== */}
        <div className="col-md-7">
          {newsDocs.map((item) => (
            <div key={item._id} className="row mb-3 border-bottom pb-2">
              <div className="col-7">
                <Link href={`/news/${item.slug}`}>
                  <h5>
                    <span className="text-danger">{item.title}</span> :{" "}
                    {item.short_description}
                  </h5>
                </Link>

                <div>
                  Views: <b>{item.totalView}</b>
                </div>
                <ShareNew newsDetails={item} />
              </div>

              <div className="col-5">
                <div className="position-relative" style={{ height: "180px" }}>
                  <Image
                    src={URL.API_BASE_URL + item.feature_image}
                    alt={item.title}
                    fill
                    className="object-cover rounded"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* ===== RIGHT SIDEBAR ===== */}
        <div className="col-md-3 border-start d-none d-md-block">
          Sidebar Content
        </div>
      </div>
    </div>
  );
}

export default HomePageNewComponent;
