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 {
  data: {
    position: string;
    category_name: string;
    slug: string;
    category_id: string;
    status: string;
    post: NewsItem[];
  };
  ads: any
}

const NewsOnly = ({ data, ads }: NewsProps) => {
  if (!data || !data.post || data.post.length === 0) {
    return null;
  }
  const { category_id, category_name, position, post, slug, status } =
    data || {};
  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)] sm:mx-0 md:mx-5`}>
          {/* <div className={`col-span-12 ${adsSlot2 || adsSlot1 ? "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)] sm:mx-0 md:mx-5`}> */}
            <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] pb-1"></div>

            <div className="flex items-center justify-between">
              <Link href={`/${slug}`}>
                <h2 className="text-2xl py-4"><b>{category_name}</b></h2>
              </Link>
            </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)]">
                {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="">
                      <Link
                        className="group flex flex-col gap-0 md:flex-col md:gap-3 lg:flex-col lg:gap-0"
                        href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                      >
                        <div className="overflow-hidden rounded-[5px] 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 lg:hidden xl:hidden">
                            <h3 className="text-sm md:text-[16px] font-normal">{post_title}</h3>
                          </div>
                        </div>

                        <div className="w-full">
                          <h3 className="text-sm md:text-[16px] font-normal left-9 mx-0 md:mx-0 mt-2 md:mt-0 lg:mt-2 mb-0 md:mb-2 text-[var(--dark)] dark:text-white hidden lg:flex">
                            {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>
                  );
                })}
              </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-1 mb-[26px] md:mb-0">
                <div className="w-auto relative">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-[14px] py-0">
                    {post?.slice(1, 5)?.map((itm, i) => {
                      const {
                        post_title,
                        image_thumb,
                        post_date,
                        stitle,
                        category_name,
                        news_id,
                        category,
                        encode_titl,
                      } = itm || {};

                      return (
                        <div
                          key={i}
                          className="relative  md:mb-[30px] lg:mb-[0px] xl:mb-[0px] 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={`${ads?.home_13 || ads.home_14 ? "w-[124px]  h-auto  md:w-[370px] md:h-[250px] lg:w-[250px] lg:h-[101px] xl:w-[250px] xl:h-[130px]" : "w-[124px]  h-auto  md:w-[370px] md:h-[250px] lg:w-[250px] lg:h-[101px] xl:w-[290px] xl:h-[130px]"} object-cover  duration-700 ease-out transform group-hover:scale-105`}
                                  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-1 pt-0 
                          md:pt-[10px] lg:pt-[10px] xl:pt-[10px]  line-clamp-2">
                              {post_title}
                            </h2>
                            {/* <p className="hidden lg:block">
                            <span className="text-[var(--gray-2)] dark:text-[var(--gray-3)] mt-2 text-base line-clamp-2">
                              {stitle}
                            </span>
                          </p> */}
                            {/* <div className="text-sm px-4 text-[var(--dark)] dark:text-white line-clamp-2">
                          <TimeBefore title={post_date} />
                          </div> */}
                          </Link>
                        </div>
                      );
                    })}
                  </div>
                </div>

              </div>


              {/* <div className="col-span-12 md:col-span-6 lg:col-span-4 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:-right-3 md:after:top-0 md:after:last:w-0 dark:after:bg-[var(--border-dark)]">
            <div className="flex flex-col">
              {post?.slice(1, 7)?.map((item, i) => {
                const {
                  image_thumb,
                  post_title,
                  news_id,
                  category,
                  encode_titl,
                  post_date,
                } = item || {};

                return (
                  <div
                    key={i}
                    className="mb-6 last:mb-0 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:last:h-0 dark:after:bg-[var(--border-dark)]"
                  >
                    <Link
                      className="group mb-6 last:mb-0 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:last:h-0"
                      href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                    >
                      <div className="ml-2 mb-2 xl:mb-0 overflow-hidden float-right relative">
                        <div>
                          <Image
                            alt={post_title}
                            width={330}
                            height={186}
                            decoding="async"
                            className="w-[124px] h-auto lg:w-[110px] lg:h-[75px] xl:w-[180px] xl:h-[120px] object-cover group-hover:scale-105 duration-700 ease-out"
                            src={image_thumb}
                            loading="lazy"
                          />
                        </div>
                      </div>
                      <h3 className="text-lg text-[var(--dark)]    dark:text-white    line-clamp-2">
                        {post_title}
                      </h3>

                      <TimeBefore title={post_date} clss="mt-2.5 md:mt-10" />
                    </Link>
                  </div>
                );
              })}
            </div>
          </div> */}
            </div>

            <div className="flex items-end py-3 ">
              <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>

          {(adsSlot1 || 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">
                      { /* home ads 14 here */}
                      <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:flex  ">
                    <div className="h-[250px] min-w-[300px] w-full">
                      { /* home ads 14 here */}
                      <AdsComponent adSlot={adsSlot2} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "250px",
                        textAlign: "center",

                      }} />

                    </div>
                  </div>
                )}

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

export default NewsOnly;