import React from "react";
import style from "./about-us.module.css";
import { LocalMall, MonetizationOn, Stars } from "@mui/icons-material";
import Image from "next/image";
import { useRouter } from "next/router";
import NextImage from "@/other/NextImage";
import ReactHtmlParser from "react-html-parser";
import { useSelector } from "react-redux";

const AboutUs = ({ siteText }) => {
  const siteLogo = useSelector((state) => state.generalStore.site_logo);
  return (
    <React.Fragment>
      <div className={`${style.aboutus} container`} suppressHydrationWarning>
        <h1 className={`primary-heading uppercase ${style.aboutus_title}`}>
          Our Story
        </h1>
        {siteText && (
          <div className={style.flex}>
            <div className={style.aboutus_text}>
              {siteText && siteText.content[0] && (
                <div className={style.subtitle}>
                  {ReactHtmlParser(siteText.content[0])}
                </div>
              )}
              {/* <div
              className={`secondary-btn uppercase ${style.secondarybtn}`}
              onClick={() => router.push("/our-story")}
            >
              Read More
            </div> */}
            </div>
            <div className={style.aboutus_image}>
              {siteText.image && siteText.image.length > 0 && (
                <NextImage
                  src={
                    process.env.NEXT_PUBLIC_UPLOADS +
                    "/" +
                    siteText._id +
                    "/" +
                    siteText.image[0]
                  }
                  alt="About Image"
                  fill
                />
              )}
            </div>
          </div>
        )}
        <div className={style.secondText}>
          {siteText && siteText.content[1] && (
            <div className={style.subtitle}>
              {ReactHtmlParser(siteText.content[1])}
            </div>
          )}
        </div>
      </div>
    </React.Fragment>
  );
};

export default AboutUs;
