import React from "react";
import { useRouter } from "next/router";

import styles from "./seoMessage.module.scss";

import Image from "next/image";
import signImg from "../../../public/images/seo-message/sign.png";
import classNames from "classnames";

const SeoMessage = ({ data }: any) => {
  const { locale } = useRouter();

  return (
    <article className={classNames(styles.seoMessage, "container")}>
      <h2 className="title text-gradiant">
        {locale === "ar" ? data?.[0]?.titleAr : data?.[0]?.titleEn}:
      </h2>

      <div dangerouslySetInnerHTML={{ __html: data?.[0]?.body }}></div>

      {/* <div className="quote">
        <em>
          "Individual commitment to a group effort--that is what makes a team work, a company work,
          a society work, a civilization work." -Vince Lombardi
        </em>
      </div>

      <p className="mb-8 lg:mb-0">
        With a resolute guidance from almighty ‘Allah’ and support from H. H. Salman bin Abdulaziz
        Al Saud, King of Saudi Arabia, we are absolutely sure that BIG will be able to achieve its
        business goals and become an integral part in the success and development of our country. We
        are committed to making life better for our clients by delivering premier products and
        services at their convenience. We want to evolve BIG as a brand that provides its customers
        with an unforgettable experience and exceptional services. As a socially responsible
        organization, we promote health, safety and environment (HSE) standards in all our business
        sectors, and work towards sustainability and community interest.
        <br />
        <br />
        Thank You!
      </p> */}

      <div className="lg:flex justify-between items-center">
        <div className="mb-8 lg:mb-0">
          <div className="name">{locale === "ar" ? data?.[0]?.nameAr : data?.[0]?.nameEn}</div>
          <em className="text-gradiant">
            {locale === "ar" ? data?.[0]?.positionAr : data?.[0]?.positionEn}
          </em>
        </div>

        <div className="image">
          <Image src={signImg} alt="" />
        </div>
      </div>
    </article>
  );
};

export default SeoMessage;