import SwiperComponent from "@/component/mucles/SwiperComponent";
import Image from "next/image";
import { SwiperSlide } from "swiper/react";
import image from "@/public/assets/Frame 1984077839.png";
import { useTranslation } from "react-i18next";

const OurPartners = () => {
  const { t } = useTranslation();

  return (
    <SwiperComponent phoneSlides={1} Slides={4} title={t("OurPartners.title")} space="px-10">
      <SwiperSlide>
        <div className="flex justify-center items-center relative w-full h-[400px]">
          <Image
            src={image}
            alt="Project Image 1"
            fill
            style={{ objectFit: "cover" }}
            className=""
          />
        </div>
        <div className="flex justify-between items-center mt-5">
          <div>
            <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="-0.5" y="0.5" width="44" height="44" rx="22" transform="matrix(-1 0 0 1 44 0)" stroke="white" strokeOpacity="0.2" />
              <path d="M27 28L17 18M17 18H25.3333M17 18V26.3333" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

          </div>
          <div className="flex flex-col items-end space-y-1">
            <h3 className="font-cairo text-lg text-white">اسم الشريك</h3>
            <p className="font-cairo text-sm font-extralight text-[#ffffff95]"> وصف الشريك </p>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="flex justify-center items-center relative w-full h-[400px]">
          <Image
            src={image}
            alt="Project Image 1"
            fill
            style={{ objectFit: "cover" }}
            className=""
          />
        </div>
        <div className="flex justify-between items-center mt-5">
          <div>
            <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="-0.5" y="0.5" width="44" height="44" rx="22" transform="matrix(-1 0 0 1 44 0)" stroke="white" strokeOpacity="0.2" />
              <path d="M27 28L17 18M17 18H25.3333M17 18V26.3333" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

          </div>
          <div className="flex flex-col items-end space-y-1">
            <h3 className="font-cairo text-lg text-white">اسم الشريك</h3>
            <p className="font-cairo text-sm font-extralight text-[#ffffff95]"> وصف الشريك </p>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="flex justify-center items-center relative w-full h-[400px]">
          <Image
            src={image}
            alt="Project Image 1"
            fill
            style={{ objectFit: "cover" }}
            className=""
          />
        </div>
        <div className="flex justify-between items-center mt-5">
          <div>
            <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="-0.5" y="0.5" width="44" height="44" rx="22" transform="matrix(-1 0 0 1 44 0)" stroke="white" strokeOpacity="0.2" />
              <path d="M27 28L17 18M17 18H25.3333M17 18V26.3333" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

          </div>
          <div className="flex flex-col items-end space-y-1">
            <h3 className="font-cairo text-lg text-white">اسم الشريك</h3>
            <p className="font-cairo text-sm font-extralight text-[#ffffff95]"> وصف الشريك </p>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="flex justify-center items-center relative w-full h-[400px]">
          <Image
            src={image}
            alt="Project Image 1"
            fill
            style={{ objectFit: "cover" }}
            className=""
          />
        </div>
        <div className="flex justify-between items-center mt-5">
          <div>
            <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="-0.5" y="0.5" width="44" height="44" rx="22" transform="matrix(-1 0 0 1 44 0)" stroke="white" strokeOpacity="0.2" />
              <path d="M27 28L17 18M17 18H25.3333M17 18V26.3333" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

          </div>
          <div className="flex flex-col items-end space-y-1">
            <h3 className="font-cairo text-lg text-white">اسم الشريك</h3>
            <p className="font-cairo text-sm font-extralight text-[#ffffff95]"> وصف الشريك </p>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="flex justify-center items-center relative w-full h-[400px]">
          <Image
            src={image}
            alt="Project Image 1"
            fill
            style={{ objectFit: "cover" }}
            className=""
          />
        </div>
        <div className="flex justify-between items-center mt-5">
          <div>
            <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="-0.5" y="0.5" width="44" height="44" rx="22" transform="matrix(-1 0 0 1 44 0)" stroke="white" strokeOpacity="0.2" />
              <path d="M27 28L17 18M17 18H25.3333M17 18V26.3333" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

          </div>
          <div className="flex flex-col items-end space-y-1">
            <h3 className="font-cairo text-lg text-white">اسم الشريك</h3>
            <p className="font-cairo text-sm font-extralight text-[#ffffff95]"> وصف الشريك </p>
          </div>
        </div>
      </SwiperSlide>

    </SwiperComponent>
  );
};

export default OurPartners;
