import { Image } from "antd";
import { FC } from "react";
import styles from "./aboutSeller.module.scss";
import cx from "classnames";

import Gallery from "react-photo-gallery";
const AboutSeller: FC<any> = ({sellerData,images}) => {
  const photos=[

    {
      src: "/images/VendorStoreHomepage/Gallery1.png",
      width: 8,
    height: 3
    },
    
    {
      src: "/images/VendorStoreHomepage/Gallery2.png",
      width: 8,
    height: 3
    },
    {
      src: "/images/VendorStoreHomepage/Gallery3.png",
      width: 8,
      height: 3
    },
    {
      src: "/images/VendorStoreHomepage/Gallery4.png",
      width: 8,
    height: 3
    },

  ]
  function extractContent(s:any) {
    const span = document.createElement('span');
    span.innerHTML = s;
    return span.textContent || span.innerText;
  }

  const img = images?.find((e:any) => e.sort === '3');

  
  return (
    <>
      <div className="container py-8">
        <h1 className={styles.title}>About Seller</h1>
        <div className={cx("ant-row pt-8",styles.aboutDiv)}>
          <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-6"}>
            <div className="flex items-center justify-center">
            <Image
              src={img?.image}
              className={styles.imagesStyle}
              preview={false}
            />
            </div>
          </div>
          <div className={cx("ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-18",styles.aboutTextDiv)}>
            <div>
              <div className={cx(styles.text)} dangerouslySetInnerHTML={{__html: sellerData?.description}}>
                {/*{extractContent(sellerData.description)}
                 Established as a Proprietor firm in the year 1970 at Hyderabad
                (Telangana, India), we “Pawan Trading Corporation” are a leading
                Distributor / Channel Partner of a wide range of V Belt, Lock
                Pulley, Jaw Coupling, etc.{" "}
              </div>{" "}
              <div className={cx(styles.text, "pt-4")}>
                Pawan Trading Corporation was Established in 1970. We are the
                main dealers in Telangana State for J.K.Fenner (India) Limited
                for their range of Industrial V-Belts, Various types of
                Couplings, Taper-Lock V-pulleys and Helical Gear Box.
              </div>{" "}
              <div className={cx(styles.text, "pt-4")}>
                The Dealership is since 1976. We have Established a niche with
                the industries in Hyderabad based on the genuineness of the
                products offered, supported by the right prices, fast deliveries
                and good technical support. We have a customer base of 2000
                customers, covering all types of industries. Besides, we also
                have a Sub-dealers network for deeper penetration. */}
              </div>
            </div>
          </div>
        </div>
        <div className={"ant-row pt-8"}>
          <div className={cx("ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12",styles.paddingContainer)}>
            <div className={styles.borderShadow}>
              <div  className={styles.cartTitle}>Our Mission</div>
              <div dangerouslySetInnerHTML={{__html: sellerData?.mission}} className={styles.contentHeight}>
                {/* {extractContent(sellerData.mission)}
                {/* Our mission is to Continuously improve our core competencies, 
                and quickly adapt to changing market demand */}
              </div>
            </div>
          </div>
          <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12"}>
            <div className={styles.borderShadow}>
              <div className={styles.cartTitle}>Our Vision</div>
              <div dangerouslySetInnerHTML={{__html: sellerData?.vision}} className={styles.contentHeight}>
              {/*{extractContent(sellerData.vision)}
                 When you objectively analyze our business, you will understand
                that we always provide you latest & new products. */}
              </div>
            </div>
          </div>
        </div>
        {/* <h1 className={cx(styles.gallaryTitle,"pt-8")}>Gallery</h1>
        <Gallery photos={photos}  />; */}
  
        {/* <div className={"ant-row pt-8"}>
          <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-8 pr-4"}>
              <div className={"imagesFirstContainer"} >
            <Image preview={false} src={"/images/Gallery1.svg"} />
            </div>
          </div>
          <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-8 pr-4"}>
              <div className={"imagesSecondContainer"}>
          <Image preview={false} src={"/images/VendorStoreHomepage/Gallery2.png"} />
          </div>
          <div className={"imagesSecondContainer"}>
          <Image preview={false} src={"/images/VendorStoreHomepage/Gallery3.png"} />
          </div>
              </div>
              <div className={"ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-8"}>
              <div className={"imagesFirstContainer"}>
              <Image preview={false} src={"/images/VendorStoreHomepage/Gallery4.png"} />
              </div>
              </div>
          </div> */}
      </div>
    </>
  );
};
export default AboutSeller;