import { Col, PageHeader, Row } from "antd";
import {
  LoadingOutlined,
  PlusOutlined,
  CaretRightOutlined,
} from "@ant-design/icons";
import Link from "next/link";
import Image from "next/image";
import React, { useEffect } from "react";
import { useQuery } from "react-query";
import { fetchLifestyleCat, fetchShas } from "apiCalls/apiEndpoints";
import Lifestyle from "pages/lifestyle";
import ashantiweb from "assets/ASHANTIWEB.jpg";
import ImageWithFallback from "../layout/ImageWithFallback";
import Script from "next/script";
import GAdsense from "../ad/GAdsense";

function AshantiLifeStyle({ lifeStyle }: any) {
  const { data, isLoading, isSuccess } = useQuery(["sha", "home", "b2f5"], fetchShas);

  return (
    <section className="container mx-auto sm:px-10 lg:px-10 xl:px-6 mt-16">
      {/* this has been added in the second page header component */}

      {/* <Row gutter={16}>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} lg={{ span: 24 }}>
          <div>
            <PageHeader
              className="site-page-header flex items-center"
              title={
                <h3 style={{ fontSize: "25px", color: "#000", margin: 0 }}>
                  Ashanti Lifestyle
                  <Link href="/" className="flex items-center">
                    <a className="text-black text-sm ml-2">
                      View more <CaretRightOutlined />
                    </a>
                  </Link>{" "}
                </h3>
              }
              style={{
                borderTop: "3px solid green",
                borderBottom: "1px solid green",
                paddingTop: "7px",
                paddingBottom: "7px",
              }}
            />
          </div>
        </Col>
      </Row> */}
      <div className="mt-50">
        <div className="flex">
          <div className="w-full lg:w-9/12">
            <PageHeader
              className="site-page-header flex items-center"
              title={
                <h3 style={{ fontSize: "25px", color: "#000", margin: 0 }}>
                  Ashanti Lifestyle
                  <Link href="/lifestyle" className="flex items-center">
                    <a className="text-black text-sm ml-2">
                      View more <CaretRightOutlined />
                    </a>
                  </Link>{" "}
                </h3>
              }
              style={{
                borderTop: "3px solid green",
                borderBottom: "1px solid green",
                paddingTop: "7px",
                paddingBottom: "7px",
              }}
            />
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-x-8">
              {
                <>
                  {lifeStyle?.length > 0 ? (
                    <>
                      {lifeStyle.map((lifestyle_categories: any, i: number) => (
                        <Link
                          key={i}
                          href={`/lifestyle/${lifestyle_categories?.slug}`}
                          passHref
                        >
                          <a>
                            <div className="single-location location-2 text-center round-lg mt-30">
                              {/* md:w-[195px] md:h-[130px] */}
                              <div className="view overlay zoom relative w-full h-[255px] sm:h-[225px] lg:h-[120px] xl:h-[140px]">
                                {/* lifestyle_categories?.picture */}
                                {/* <Image layout='fill' src={lifestyle_categories?.picture} alt={lifestyle_categories?.name} /> */}
                                <ImageWithFallback
                                  layout="fill"
                                  src={lifestyle_categories?.picture}
                                  alt={lifestyle_categories?.name}
                                />
                                {/* <Image layout='fill' src={ashantiweb} alt={lifestyle_categories?.name} /> */}
                              </div>
                              <h4 className="location-title">
                                {lifestyle_categories?.name}
                              </h4>
                            </div>
                          </a>
                        </Link>
                      ))}
                    </>
                  ) : null}
                </>
              }
            </div>
          </div>
          <div className="hidden lg:block lg:w-3/12">
            {isLoading ? (
              <p>Loading Ad...</p>
            ) : isSuccess ? (
              <Link href={data?.data?.url} passHref>
                <a
                  href={data?.data?.url}
                  className="w-[210px] xl:w-[280px] h-[380px] xl:h-[400px]  ml-3 relative"
                >
                  <Image
                    layout="fill"
                    src={data?.data?.mediaGallery?.medium}
                    alt={`Ashantiweb advert`}
                  />
                </a>
              </Link>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}

export default AshantiLifeStyle;