import { Badge, Col, PageHeader, Row, Typography } 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 } from "apiCalls/apiEndpoints";
import Lifestyle from "pages/lifestyle";
import ashantiweb from "assets/ASHANTIWEB.jpg";
import ImageWithFallback from "../layout/ImageWithFallback";
import GAdsense from "../ad/GAdsense";
import { formatSentence } from "utilFuncs/utilFunctions";

function AshantiVlog({ vlogs }: any) {
  

  return (
    <section className="container mx-auto sm:px-10 lg:px-10 xl:px-6 mt-16">
      <Row className="mt-50" gutter={16}>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} lg={{ span: 18 }}>
          <div className="">
            <div>
              <PageHeader
                className="site-page-header flex items-center"
                title={
                  <h3 style={{ fontSize: "25px", color: "#000", margin: 0 }}>
                    Ashanti Vlog
                    <Link href="/vlogs" 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>
            <div className="row">
              {
                <>
                  {vlogs?.length > 0 ? (
                    <>
                      <Row
                        style={{
                          marginTop: "20px",
                          marginRight: "12px",
                          marginLeft: "12px",
                        }}
                        gutter={[16, 16]}
                      >
                        {vlogs.map((vlog: any, i: number) => (
                          <Col key={i} xs={{ span: 24 }} md={{ span: 24 / 4 }}>
                            <Badge.Ribbon text="Vlog" color="#3db83a">
                              <Link
                                href={"/vlogs/" + vlog?.model?.slug}
                                className="card"
                                passHref
                              >
                                <a className="shadow-md w-full">
                                  <div className="card-img-top res-vlog-image h-[260px]  md:h-[160px] lg:h-[200px] xl:h-[160px] w-full relative">
                                    <ImageWithFallback
                                      src={vlog?.model?.picture}
                                      alt={vlog?.model?.title}
                                      layout="fill"
                                    />
                                    {/* <Image src={ashantiweb} alt={vlog?.model?.title} layout='fill' /> */}
                                  </div>
                                  {/* <img className="card-img-top res-vlog-image" src={vg?.model?.picture} alt={vg?.model?.title} /> */}
                                  <div className="card-body">
                                    <Typography.Title
                                      level={2}
                                      style={{
                                        fontSize: "14px",
                                        fontWeight: 400,
                                      }}
                                      className="font-1 h-10"
                                      ellipsis={{ rows: 3, expandable: false }}
                                    >

                                      {formatSentence(vlog?.model?.title)}
                                      {/* {}{" "} */}
                                      
                                    </Typography.Title>
                                  </div>
                                </a>
                              </Link>
                            </Badge.Ribbon>
                          </Col>
                        ))}
                        {/* {cms?.nchomevlogs?.map((vg: Record<string, any>) =>
														<Col xs={{ span: 24 }} md={{ span: (24 / 4) }}>
															<Badge.Ribbon text="Vlog" color='#3db83a'>
																<Link to={'/vlog/' + vg?.model?.slug} className="card">
																	<img className="card-img-top res-vlog-image" src={vg?.model?.picture} alt={vg?.model?.title} />
																	<div className="card-body">
																		<Typography.Title level={2} style={{ fontSize: '14px', fontWeight: 400 }} className="font-1" ellipsis={{ rows: 2, expandable: false }}>{vg?.model?.title}</Typography.Title>
																	</div>
																</Link>
															</Badge.Ribbon>
														</Col>
													)} */}
                      </Row>
                      {/* {vlogs.map((lifestyle_categories: any, i: number) =>
                                                    <div key={i} className="col-lg-3 col-sm-6">
                                                        <div className="single-location location-2 text-center mt-30">
                                                            <div className='view overlay zoom relative w-[195px] h-[130px]'>
                                                                <Image layout='fill' src={lifestyle_categories?.picture} alt={lifestyle_categories?.name} />
                                                            </div>
                                                            <Link href={'/lifestyle/' + lifestyle_categories?.slug} passHref>
                                                                <a>
                                                                    {lifestyle_categories?.name}
                                                                </a>
                                                            </Link>
                                                            <h4 className="location-title">{lifestyle_categories?.name}</h4>
                                                        </div>
                                                    </div>
                                                )} */}
                    </>
                  ) : null}
                </>
              }
            </div>
          </div>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} lg={{ span: 6 }}>
          <div className="mt-10 lg:mt-0">
            <GAdsense
              width="100%"
              isResponsive={true}
              adSlot="9306370885"
              adFormat="auto"
            />
          </div>
        </Col>
      </Row>
      
    </section>
  );
}

export default AshantiVlog;