import React from "react";
import style from "./aboutus.module.css";
import Image from "next/image";
import NextImage from "../../other/NextImage";
import HtmlParser from "react-html-parser";
import { useRouter } from "next/router";

const AboutUs = ({ siteText }) => {
  const router = useRouter();
  return (
    <React.Fragment>
      {siteText && (
        <div className={`${style.aboutus_section} container`}>
          <div className={style.aboutus}>
            <div
              className={`${style.aboutus_text} ${style.about_grid} ql-editor`}
            >
              <h1>{siteText.title}</h1>
              {siteText.content &&
                siteText.content.length > 0 &&
                HtmlParser(siteText.content[0])}
              <div
                className={`primary_btn uppercase ${style.btn} `}
                onClick={() => router.push("/our-story")}
              >
                Read More
              </div>
            </div>
            <div className={`${style.bg_aboutus} ${style.aboud_grid}`}>
              <NextImage
                src={`${
                  process.env.NEXT_PUBLIC_UPLOADS +
                  "/" +
                  siteText._id +
                  "/" +
                  siteText.image[0]
                }`}
                alt={"about us"}
              />
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

export default AboutUs;
