import { CaretRightOutlined } from "@ant-design/icons";
import { Col, PageHeader, Row } from "antd";

import Link from "next/link";
import React from "react";
import PageHeaderComp from "../page/PageHeaderComp";
import Image from "next/image";
import testImage from "assets/images/lcampbell-marquis-of-lorne.png";
import { capitalizeWord, containsHTMLTags } from "utilFuncs/utilFunctions";
import parse, {domToReact} from 'html-react-parser'

type frontServicesProps = {
  servicesAds: Array<any>;
};

function FrontServices({ servicesAds }: frontServicesProps) {
  //   const data = servicesAds;

  console.log('object', servicesAds);

  const options = {
    replace: ({ attribs, children }) => {

      console.log('attribs', attribs);
      return (
        <p style={{ width: '100%', wordBreak: 'break-word',  fontSize: "14px",
        fontWeight: 400, }} className="font-1 text-gray-600">
          {domToReact(children)}
        </p>
      );
      // {domToReact(children)}
      // if (!attribs) {
      //   return;
      // }

      // if (attribs.id === 'main') {
      //   return <h1 style={{ fontSize: 42 }}>{domToReact(children, options)}</h1>;
      // }

      // if (attribs.class === 'prettify') {
      //   return (
      //     <span style={{ color: 'hotpink' }}>
      //       {domToReact(children, options)}
      //     </span>
      //   );
      // }
    },
  };

  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: 24 }}>
          <PageHeaderComp page_title="Services" link_to_page="/ads/services" />
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-x-8 gap-y-6">
            {servicesAds?.slice(0, 5).map((item: any, index: any) => (
              <Link key={index} href={`/ad/${item?.slug}`} passHref>
                <div className="con_box w-full  p-2 rounded-md cursor-pointer">
                  {/* <a  className="box w-full"> */}
                    <div className="w-full h-56 relative rounded-md">
                      <Image layout="fill" src={item.picture} />
                    </div>
                    <div>
                      <i></i>
                      <div className="text-2xl text-gray-800">{capitalizeWord(item.name)}</div>

                      {containsHTMLTags(item?.description) ? parse(item?.description.slice(0,200), options)  : (<p className="font-normal text-sm font-1 text-gray-600">`${item?.description.slice(0,200)}`</p>)   }

                      {/* <div  className=" text-gray-400">{parse(item.description)}</div> */}
                    </div>
                  {/* </a> */}
                </div>
              </Link>
            ))}
          </div>
        </Col>
      </Row>
    </section>
  );
}

export default FrontServices;