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

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

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

  return (
    <article className={styles.ourClients}>
      <div className="container">
        <div className="mb-13">
          <div className="lg:flex items-baseline">
            <h1 className="title ltr:mr-6 rtl:ml-6 text-gradiant">{t("Our clients")}</h1>

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

        <div className="flex flex-wrap justify-center">
          {data.map(({ icon_img, url }: any, index: number) => (
            <div key={index} className="basis-1/2 md:basis-1/6 p-2.5">
              <a href={url} target={url === "#" ? "_self" : "_blank"} rel="noreferrer">
                <Image src={icon_img} alt="" width={334} height={223} quality={100} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
};

export default OurClients;