import AddCard from "@/components/common/addCard/AddCard";
import AdsComponent from "@/components/common/googleAds/GoogleAds";
import { NewsItem } from "@/interface/post";
import Image from "next/image";
import Link from "next/link";

interface NewsProps {
  data1: {
    position: string;
    category_name: string;
    slug: string;
    category_id: string;
    status: string;
    post: NewsItem[];
  };
  data2: {
    position: string;
    category_name: string;
    slug: string;
    category_id: string;
    status: string;
    post: NewsItem[];
  };
  end_point?: string;
  title?: string;
  ads: any
}

const NewsWithLatest = ({ data1, data2, ads, end_point, title }: NewsProps) => {
  const { category_id, position, post, slug, status } =
    data1 || {};
  const {
    category_id: category_id2,
    category_name: category_name2,
    position: position2,
    post: post2,
    slug: slug2,
    status: status2,
  } = data2 || {};

  const adsSlot1 = "1431883232"
  const adsSlot2 = "8681432265"
  const adsSlot3 = "8974497186"

  const categoryName1 = post?.[0]?.category_name || "Default Category 1";
  const categoryName2 = post2?.[0]?.category_name || "Default Category 2";
  const convertTimeStampToDate = (time_stamp: any) => {
    const date = new Date(time_stamp * 1000)
    const formattedDate = date.toLocaleDateString("en-US",
      {
        month: "short",
        day: "2-digit",
        year: "numeric"
      }
    )
    return <div>{formattedDate}</div>
  }


  return (


    <section className="mt-[40px]">
      <div className="container px-4 mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 relative after:bg-[var(--border-color)]   dark:after:bg-[var(--border-dark)]">
          <div className={`col-span-12  relative after:bg-[var(--border-color)]  dark:after:bg-[var(--border-dark)]`}>
          {/* <div className={`col-span-12 ${adsSlot1 || adsSlot3 || adsSlot2 ? "lg:col-span-8 xl:col-span-9" : "lg:col-span-12 xl:col-span-12"} relative after:bg-[var(--border-color)]  dark:after:bg-[var(--border-dark)]`}> */}
            {/* <div className="border-[var(--border-color)] dark:border-[var(--border-dark)] border-b-[2px] mb-3 pb-1">

              Bussiness cagtegory content
              
            </div> */}

            <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
              <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-6 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] mx-0 ">
                <div className="w-full flex flex-col justify-start sm:px-0 md:px-5 lg:pl-5 xl:pl-5 lg:pr-0 xl:pr-0">
                  <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] pb-1"></div>
                  <div className="flex items-center justify-start">
                    <Link href={`/${slug}`}>
                      <h2 className="text-2xl py-4"><b>{categoryName1}</b></h2>
                    </Link>
                  </div>
                </div>

                {post?.slice(0, 1)?.map((item, i) => {
                  const {
                    category_name,
                    image_large,
                    post_title,
                    stitle,
                    news_id,
                    category,
                    encode_titl,
                    post_date,
                  } = item || {};

                  return (
                    <div key={i} className="sm:mx- md:mx-5 lg:ml-5 xl:ml-5 lg:mr-0 xl:mr-0">
                      <Link
                        className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                        href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                      >
                        <div className="overflow-hidden rounded-[5px] w-full md:w-full lg:w-full relative">
                          <div>
                            <Image
                              alt={post_title}
                              width={560}
                              height={393}
                              decoding="async"
                              className="w-full h-auto  object-cover duration-700 ease-out transform group-hover:scale-105 "
                              src={image_large}
                              loading="lazy"
                            />
                          </div>
                          <div className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/100 via-black/20 rounded-[5px] text-white flex items-end px-3 py-5">
                            <h3 className="text-sm md:text-[16px] font-normal">{post_title}</h3>
                          </div>
                        </div>
                        {/* <div className="w-full md:w-1/2 lg:w-full">
                          <h3 className="text-2xl left-9 mx-4 md:mx-0 text-[var(--dark)] mt-2 md:mt-0 lg:mt-2 mb-0 md:mb-2    dark:text-white    font-semibold">
                            {post_title}
                          </h3>
                          <p className="hidden md:block text-base text-[var(--gray-2)] dark:text-[var(--gray-3)]">
                            <span className="line-clamp-2">{stitle || ""}</span>
                          </p>

                          <TimeBefore title={post_date} clss="ml-4 md:ml-0" />
                        </div> */}
                      </Link>


                      <div className="w-auto relative">


                        <div className="flex flex-col mb-[36px] pt-[31px]">
                          {post?.slice(1, 5)?.map((item, i) => {
                            const {
                              category_name,
                              image_large,
                              image_thumb,
                              post_title,
                              stitle,
                              news_id,
                              category,
                              encode_titl,
                              post_date,
                              time_stamp
                            } = item || {};
                            return (
                              <div
                                key={i}
                                className="mb-[22px] last:mb-0 relative after:bg-[var(--border-color)]  dark:after:bg-[var(--border-dark)]"
                              >
                                <Link
                                  className="group"
                                  href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                                >
                                  <div className=" overflow-hidden rounded-[5px] float-left relative">
                                    <div>
                                      <Image
                                        alt={post_title}
                                        width={330}
                                        height={186}
                                        decoding="async"
                                        className="w-[124px]  h-auto sm:w-[154px] sm:h-[107] lg:w-[110px] lg:h-[73px] xl:w-[144px] xl:h-[77px] object-cover duration-700 ease-out transform group-hover:scale-105"
                                        src={image_thumb}
                                        loading="lazy"
                                      />
                                    </div>
                                  </div>
                                  <div>
                                    <h3 className='text-sm px-[16px] dark:text-white line-clamp-2 text-[#808080] '>{convertTimeStampToDate(time_stamp)}</h3>
                                    <h3 className="text-sm text-[var(--dark)] px-[16px] dark:text-white line-clamp-2">
                                      {post_title}
                                    </h3>
                                  </div>
                                </Link>

                                {/* <TimeBefore title={post_date} /> */}
                              </div>
                            );
                          })}
                        </div>
                      </div>


                      <div className="block">
                        <Link
                          // className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                          href={`/${slug?.toLowerCase()}`}>
                          <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300">
                            View More <span className="text-lg">»</span>
                          </button>
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-6 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] mx-0">
                <div className="w-full flex flex-col justify-start sm:px-0 md:px-5 lg:pr-5 xl:pr-5 lg:pl-0 xl:pl-0">
                  <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] pb-1"></div>
                  <div className="flex items-center justify-start">
                    <Link href={`/${slug}`}>
                      <h2 className="text-2xl py-4"><b>{categoryName2}</b></h2>
                    </Link>
                  </div>
                </div>

                {post2?.slice(0, 1)?.map((item, i) => {
                  const {
                    category_name,
                    image_large,
                    post_title,
                    stitle,
                    news_id,
                    category,
                    encode_titl,
                    post_date,
                  } = item || {};

                  return (
                    <div key={i} className="sm:mx- md:mx-5 lg:mr-5 xl:mr-5 lg:ml-0 xl:ml-0">
                      <Link
                        className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                        href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                      >
                        <div className="overflow-hidden rounded-[5px] w-full md:w-full lg:w-full relative">
                          <div>
                            <Image
                              alt={post_title}
                              width={560}
                              height={393}
                              decoding="async"
                              className="w-full h-auto object-cover duration-700 ease-out transform group-hover:scale-105 "
                              src={image_large}
                              loading="lazy"
                            />
                          </div>
                          <div className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/100 via-black/20 rounded-[5px] text-white flex items-end px-3 py-5">
                            <h3 className="text-sm md:text-[16px] font-normal">{post_title}</h3>
                          </div>
                        </div>
                        {/* <div className="w-full md:w-1/2 lg:w-full">
                          <h3 className="text-2xl left-9 mx-4 md:mx-0 text-[var(--dark)] mt-2 md:mt-0 lg:mt-2 mb-0 md:mb-2    dark:text-white    font-semibold">
                            {post_title}
                          </h3>
                          <p className="hidden md:block text-base text-[var(--gray-2)] dark:text-[var(--gray-3)]">
                            <span className="line-clamp-2">{stitle || ""}</span>
                          </p>

                          <TimeBefore title={post_date} clss="ml-4 md:ml-0" />
                        </div> */}
                      </Link>


                      <div className="w-auto relative">


                        <div className="flex flex-col mb-[36px] pt-[31px]">
                          {post2?.slice(1, 5)?.map((item, i) => {
                            const {
                              category_name,
                              image_large,
                              image_thumb,
                              post_title,
                              stitle,
                              news_id,
                              category,
                              encode_titl,
                              post_date,
                              time_stamp
                            } = item || {};
                            return (
                              <div
                                key={i}
                                className="mb-[22px] last:mb-0 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)]"
                              >
                                <Link
                                  className="group"
                                  href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                                >
                                  <div className="overflow-hidden rounded-[5px] float-left relative">
                                    <div>
                                      <Image
                                        alt={post_title}
                                        width={330}
                                        height={186}
                                        decoding="async"
                                        className="w-[124px] h-auto sm:w-[154px] sm:h-[107] lg:w-[110px] lg:h-[73px] xl:w-[144px] xl:h-[77px] object-cover duration-700 ease-out transform group-hover:scale-105"
                                        src={image_thumb}
                                        loading="lazy"
                                      />
                                    </div>
                                  </div>
                                  <div>
                                    <h3 className='text-sm px-2 dark:text-white px-[16px] line-clamp-2 text-[#808080] '>{convertTimeStampToDate(time_stamp)}</h3>
                                    <h3 className="text-sm text-[var(--dark)] px-[16px] dark:text-white line-clamp-2">
                                      {post_title}
                                    </h3>
                                  </div>
                                </Link>

                                {/* <TimeBefore title={post_date} /> */}
                              </div>
                            );
                          })}
                        </div>
                      </div>
                      <div className="block">
                        <Link
                          // className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                          href={`/${slug2?.toLowerCase()}`}>
                          <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300">
                            View More <span className="text-lg">»</span>
                          </button>
                        </Link>
                      </div>
                    </div>
                  );
                })}

              </div>
            </div>


          </div>

          {/* <div className="col-span-12 lg:col-span-4 xl:col-span-3 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:right-0 after:last:h-0 lg:after:w-[1px] lg:after:h-full lg:after:-right-3 lg:after:top-0 lg:after:last:w-0 dark:after:bg-[var(--border-dark)]">
            <div className="border-[var(--border-color)]  dark:border-[var(--border-dark)] border-b-[2px] mb-3 pb-1">
         
              
              side bar for latest news as well as for most read

              <div className="flex items-center justify-between">
                <Link href="/latest-news">
                  <h2 className="category-text"> {title ?? "Latest news"}</h2>
                </Link>
              </div>
            </div>

            latest new vertical 
            <LatestNewsVertical end_point={end_point} />
              side bar for latest news as well as for most read

          </div> */}

          {/* {ads?.home_14 || ads?.home_16 || ads?.home_13 ? (
            <div className="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-3 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:right-0 after:last:h-0 md:after:w-[1px] md:after:h-full md:after:top-0 md:after:-right-3 md:after:last:w-0 dark:after:bg-[var(--border-dark)]">
              <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center justify-center gap-4">
                {ads?.home_14 && (
                  <div className="w-full flex items-center justify-center">
                    <div className="h-[250px]">
                      <AddCard imgPath={ads?.home_14} />
                    </div>
                  </div>
                )}
                {ads?.home_16 && (
                  <div className="w-full flex items-center justify-center hidden sm:flex lg:hidden xl:flex">
                    <div className="h-[250px]">
                      <AddCard imgPath={ads?.home_16} />
                    </div>
                  </div>
                )}
                {ads?.home_13 && (
                  <div className="w-full flex items-center justify-center hidden sm:hidden lg:flex xl:flex">
                    <div className="h-[250px]">
                      <AddCard imgPath={ads?.home_13} />
                    </div>
                  </div>
                )}
              </div>
            </div>
          ) : null} */}

          {adsSlot1 || adsSlot3 || adsSlot2 ? (
            <div className="col-span-12 w-full lg:h-0 lg:opacity-0 lg:pointer-events-none lg:overflow-hidden">
            {/* <div className="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-3 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:right-0 after:last:h-0 md:after:w-[1px] md:after:h-full md:after:top-0 md:after:-right-3 md:after:last:w-0 dark:after:bg-[var(--border-dark)]"> */}
              <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center justify-center gap-4">
                {adsSlot1 && (
                  <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                    <div className="h-[250px] min-w-[300px] w-full">
                      <AdsComponent adSlot={adsSlot1} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "250px",
                        textAlign: "center",
                      }} />

                    </div>
                  </div>
                )}
                {adsSlot3 && (
                  <div className="bg-[#f9f9f9] w-full flex items-center justify-center hidden sm:flex ">
                    <div className="h-[250px] min-w-[300px] w-full">
                      <AdsComponent adSlot={adsSlot3} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "250px",
                        textAlign: "center",

                      }} />

                    </div>
                  </div>
                )}
                {adsSlot2 && (
                  <div className="bg-[#f9f9f9] w-full flex items-center justify-center hidden sm:hidden lg:flex xl:flex">
                    <div className="h-[250px] min-w-[300px] w-full">
                      <AdsComponent adSlot={adsSlot2} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "250px",
                        textAlign: "center",

                      }} />

                    </div>
                  </div>
                )}
              </div>
            </div>
          ) : null}

        </div>
      </div>
    </section>
  );
};

export default NewsWithLatest;