import LayoutWithNav from "@/components/layout/LayoutWithNav";
import type { NextPage } from "next";
import {
  Typography,
  Avatar,
  Menu,
  Dropdown,
  Button,
  Col,
  Row,
  Card,
  Breadcrumb,
} from "antd";
import styles from "../../styles/Home.module.css";
import Link from "next/link";
import Image from "next/image";
import classifiedHeader from "assets/images/page-header.png";
import classifiedsHeadIcon from "assets/images/lifestyle-head-icon.png";
import {
  classifiedCategoriesWithSubcategories,
  fetchDistricts,
  fetchLifestyle,
} from "apiCalls/apiEndpoints";
import { useDistricts } from "context/DistrictContext";
import { useEffect } from "react";
import { NextSeo } from "next-seo";

const Lifestyle: NextPage = ({ lifestyle, districts }: any) => {
  const { setDistricts, setCurrentDistrict } = useDistricts();

  setDistricts(districts);

  useEffect(() => {
    setCurrentDistrict(null);
  }, [setCurrentDistrict]);

  return (
    <LayoutWithNav page_title="Classifieds" description="description">
      <NextSeo
        title={`Lifestyle | Ashantiweb.com`}
        description={`Read and Watch All what Ashanti Region has to offer`}
      />
      <div
        style={{
          background: "#333",
          position: "relative",
          marginTop: "54px",
          height: "240px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div className="w-full h-full absolute">
          <Image
            src={classifiedHeader}
            alt="classified header"
            layout="fill"
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: "100%",
              zIndex: 1,
            }}
          />
        </div>
        <div className="container mx-auto lg:px-[100px] page-header-row flex items-center justify-between">
          <div>
            <Breadcrumb>
              <Breadcrumb.Item className="mt-4">
                <Link style={{ color: "#fff" }} href="/">
                  <a href="" className="text-white">
                    Home /
                  </a>
                </Link>
              </Breadcrumb.Item>
            </Breadcrumb>
            <Typography.Title
              className="mt-10"
              level={1}
              style={{ fontSize: "16px", color: "#fff" }}
            >
              Ashanti Lifestyle
            </Typography.Title>
          </div>
          <div className="page-header-sha">
            {/* <SHA showLoadingIndicator={false} imageHeight='120px' hideLabel imageOnly specification={{ page: 'classifieds', id: 'classifieds-1', code: 'classifieds-top-page' }} /> */}
          </div>
          <div className="hidden md:block h-[210px] w-[210px]">
            <Image
              src={classifiedsHeadIcon}
              alt="classified icon header"
              className="page-header-img mb-2"
              height={210}
              width={210}
              style={{ height: "210px", margin: "0 0 0 auto" }}
            />
          </div>
        </div>
      </div>
      <section className="container mx-auto lg:px-[80px]">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-4">
          {lifestyle.map((lf: any, i: number) => (
            <div key={i} className="text-center">
              {/* <div className="relative  h-40 xl:h-48 2xl:h-52 bg-gray-600">
              </div> */}
              <Link href={"/lifestyle/" + lf?.slug} passHref>
                  {/* <a
                    href=""
                    className="text-green-500 font-semibold text-xl mt-1"
                  >
                    {lf?.name}
                  </a> */}

                  <div className="cursor-pointer view overlay zoom relative  h-64 sm:h-46 xl:h-48 2xl:h-52 bg-gray-600">

                <Image src={lf?.picture} alt={"10"} layout="fill" />
              </div>
                </Link>
              
              <Typography.Title
                className="mb-3 clr1 text-center text-green-500"
                level={2}
                style={{ fontSize: "16px" }}
              >
                <Link href={"/lifestyle/" + lf?.slug} passHref>
                  <a
                    href=""
                    className="text-green-500 font-semibold text-xl mt-1"
                  >
                    {lf?.name}
                  </a>
                </Link>
              </Typography.Title>
              {/* <Link href={'/lifestyle/' + lf?.slug} passHref>
                <a href="" className='text-green-500 font-semibold text-xl mt-2'>
                  {lf?.name}
                </a>
              </Link> */}
              {/* <Typography.Paragraph className='text-center' ellipsis={{ rows: 3, expandable: true, symbol: 'more' }}>
                {lf?.short_description}
              </Typography.Paragraph> */}
              <Link href={"/lifestyle/" + lf?.slug} passHref>
                <a href="" className="text-gray-700">
                  {lf?.short_description.slice(0, 150)}{" "}
                  {lf?.short_description.length > 130 ? (
                    <p className="text-sm text-gray-600"> more ...</p>
                  ) : (
                    ""
                  )}
                </a>
              </Link>
              {/* <p className=" text-sm text-gray-600"> */}
              {/* {lf?.short_description.slice(0, 150)}{" "}
                {lf?.short_description.length > 130 ? (
                  <p className="text-sm text-gray-600"> more ...</p>
                ) : (
                  ""
                )}
              </p> */}
            </div>
          ))}
        </div>
      </section>
    </LayoutWithNav>
  );
};

export async function getServerSideProps({ req, res }: any) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );

  const classifiedWithSubs = await classifiedCategoriesWithSubcategories();
  const fetchLifeStyles = await fetchLifestyle();
  const districts = await fetchDistricts();

  return {
    props: {
      lifestyle: fetchLifeStyles.data,
      districts: districts.data,
    },
    // will be passed to the page component as props
  };
}

export default Lifestyle;