import React, { useState, useEffect } from 'react';
import AddCard from "@/components/common/addCard/AddCard";
import { NewsItem } from "@/interface/post";
import Image from "next/image";
import Link from "next/link";
import AdsComponent from '@/components/common/googleAds/GoogleAds';

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 NewsWithAdd = ({ data1, data2, ads }: NewsProps) => {
  const { post, slug } = data1 || {};
  const {
    category_id: category_id2,
    category_name: category_name2,
    position: position2,
    post: post2,
    slug: slug2,
    status: status2,
  } = data2 || {};
  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);

    // Format MM-DD-YYYY
    const formattedDate = date.toLocaleDateString("en-US", {
      month: "short",
      day: "2-digit",
      year: "numeric",
    });
    return <div>{formattedDate}</div>;
  };

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

  return (
    <section className="mt-[20px]">
      <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="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, time_stamp } = item || {};

                  return (
                    <div key={i} className="sm:mx-2 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 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  text-white flex items-end px-3 py-5">
                            <h3 className="text-sm md:text-[16px] font-normal">{post_title}</h3>
                          </div>
                        </div>
                      </Link>

                      <div className="w-auto relative">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-[15px] mb-[11px] pt-[31px]">
                          {post?.slice(1, 5)?.map((itm, i) => {
                            const { post_title, image_thumb, post_date, stitle, category_name, news_id, category, encode_titl, time_stamp } = itm || {};

                            return (
                              <div key={i} className="relative mb-[20px] dark:bg-black">
                                <Link
                                  className="group"
                                  href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                                >
                                  <div className="overflow-hidden rounded-[5px] relative float-left">
                                    <div>
                                      <Image
                                        alt={post_title}
                                        width={330}
                                        height={186}
                                        decoding="async"
                                        className={`w-[124.5px]  h-auto md:w-[350.5px] {${adsSlot3 || adsSlot1 || adsSlot2 ? "   lg:w-[250px] lg:h-[121px] xl:w-[250px] xl:h-[130px]" : " lg:w-[250px] lg:h-[121px] xl:w-[290px] xl:h-[130px]"} object-cover group-hover:scale-105  duration-700 ease-out`}
                                        src={image_thumb}
                                        loading="lazy"
                                      />
                                    </div>
                                  </div>
                                  <h2 className="text-sm text-[var(--dark)] px-3 sm:px-[10px] md:px-1 lg:px-1 dark:text-white px-2 pt-0 md:pt-[12px] lg:pt-[12px] xl:pt-[12px] line-clamp-2">
                                    {post_title}
                                  </h2>
                                  {/* <div className="text-sm pl-5 text-[var(--dark)] dark:text-white line-clamp-2">
                                    Format the post date
                                    <p>{convertPostDateToDate(post_date)}</p>
                                  </div> */}
                                </Link>
                              </div>
                            );
                          })}
                        </div>
                      </div>

                      <div className="block">
                        <Link 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 { image_large, post_title, category, encode_titl } = 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 rounded-[5px] bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/100 via-black/20  text-white flex items-end px-2 py-5">
                            <h3 className="text-sm md:text-[16px] font-normal">{post_title}</h3>
                          </div>
                        </div>
                      </Link>

                      <div className="w-auto relative">
                        <div className="flex flex-col mb-[31px] pt-[31px]">
                          {post2?.slice(1, 5)?.map((item, i) => {
                            const { image_thumb, post_title, category, encode_titl, 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="md:ml-0 xl:mb-0 rounded-[5px] overflow-hidden float-left relative">
                                    <div>
                                      <Image
                                        alt={post_title}
                                        width={330}
                                        height={186}
                                        decoding="async"
                                        className="w-[124px] rounded-[5px] h-auto sm:w-[154px] sm:h-[107] lg:w-[110px] lg:h-[73px] xl:w-[143px] 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] px-1 dark:text-white line-clamp-2">
                                      {post_title}
                                    </h3>
                                  </div>
                                </Link>
                                {/* Format the post date */}

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

                      <div className="block">
                        <Link href={`/${slug2?.toLowerCase()}`}>
                          <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 lg:mt-[23px] xl:mt-[24px] 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>

          {/* Ad Section */}
          {/* {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]">
                      home ads 14 here
                      <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]">
                      home ads 16 here
                      <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]">
                      home ads 13 here
                      <AddCard imgPath={ads?.home_13} />
                    </div>
                  </div>
                )}
              </div>
            </div>
          ) : null} */}

          {adsSlot3 || adsSlot1 || adsSlot2 ? (
            <div className="col-span-12 w-full lg:h-0 lg:opacity-0 lg:pointer-events-none lg:overflow-hidden">
              <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center justify-center gap-4">
                {adsSlot3 && (
                  <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                    <div className="h-[250px] min-w-[300px] w-full">
                      <AdsComponent adSlot={adsSlot3} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "250px",
                        textAlign: "center",

                      }} />

                    </div>
                  </div>
                )}
                {adsSlot1 && (
                  <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={adsSlot1} 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 NewsWithAdd;