import React from "react";

import Image from "next/image";
import { useTranslation } from "next-i18next";

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

import icon1 from "../../../public/icons/countables/1.png";
import icon2 from "../../../public/icons/our-vision/2.png";
import image from "../../../public/images/our-vision/2.png";

interface Props {
  vision: string;
  mission: string;
}

const OurVision = ({ vision, mission }: Props) => {
  const { t } = useTranslation("common");

  const items = [
    {
      label: t("Our Vision"),
      des: vision,
      icon: icon1,
    },
    {
      label: t("Our Mission"),
      des: mission,
      icon: icon2,
    },
  ];

  return (
    <article className={styles.ourVision}>
      <div className="ribbon top-0"></div>

      <div className="container h-full">
        <div className="lg:flex items-center h-full lg:w-2/3 pt-25 lg:pt-0">
          <div className="ltr:lg:pr-2 rtl:lg:pl-2">
            {items.map(({ label, des, icon }, index) => (
              <div key={index} className="lg:flex mb-19 items-center">
                <div className="icon-title flex items-center mb-4 lg-mb-0">
                  <div className="icon ltr:mr-8 rtl:ml-8">
                    <Image src={icon} alt="" width="50" height="50" />
                  </div>

                  <h2 className="title text-gradiant">{label}</h2>
                </div>

                <div className="des flex-1" dangerouslySetInnerHTML={{ __html: des }}></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="flex justify-end">
        <div className="image">
          <Image src={image} alt="" />
        </div>
      </div>

      <div className="ribbon bottom-0"></div>
    </article>
  );
};

export default OurVision;