import Image from "next/image";
import React, { useContext } from "react";
import { useTranslation } from "next-i18next";

import styles from "./AboutUs.module.scss";
import AppContext from "../../particles/contexts/app-context";
import YouTube from "react-youtube";

const opts = {
  width: "100%",
  height: "300",
  playerVars: {
    autoplay: 0,
  },
};

const AboutUs = ({ data }: any) => {
  const { t } = useTranslation("common");

  const { aboutUsYouTubeLink }: any = useContext(AppContext);

  return (
    <article className={styles.aboutUs}>
      <div className="container">
        <div className="max-lg:mb-6">
          <div className="mb-6">
            <div className="lg:flex items-baseline">
              <h1 className="ltr:mr-6 rtl:ml-6 mb-7 text-gradiant">{t("About Us")}</h1>

              <hr className="w-48 ltr:mr-6 rtl:ml-6 border-color-2" />
            </div>
          </div>

          <div className="indent-9" dangerouslySetInnerHTML={{ __html: data }}></div>
        </div>

        {/* <div className="lg:basis-2/5">
            <YouTube videoId={aboutUsYouTubeLink} opts={opts} iframeClassName="rounded-xl" />
          </div> */}
      </div>

      {/* <div className="image hidden md:block">
        <Image src={image} alt="" />
      </div> */}
    </article>
  );
};

export default AboutUs;