"use client";
import React from "react";
import Image from "next/image";
import { useLocale } from "next-intl";

const AboutSection = ({
  img,
  title,
  discription,
  className,
}: {
  img: string;
  title: string;
  discription: string;
  className?: string;
}) => {
  const locale = useLocale();
  return (
    <div
      className={` px-[16px] md:px-[35px] xl:px-[120px] flex items-center justify-center gap-12   lg:flex-row flex-col
   
     ${className ? className : ""} `}
      data-aos="fade-up"
      data-aos-duration="1500"
      data-aos-delay="300"
    >
      <div
        className="w-full xl:w-[57%] rounded-[16px]"
        data-aos={locale === "ar" ? "fade-left" : "fade-right"}
        data-aos-duration="1500"
        data-aos-delay="300"
        data-aos-easing="ease-in-sine"
      >
        <Image
          src={img}
          alt="img1"
          className=" xl:w-full xl:h-[358px] rounded-[16px] object-cover"
          width={2000}
          height={1000}
        />
      </div>
      <div
        className="w-full xl:w-[43%] flex flex-col items-start  xl:justify-center"
        data-aos={locale === "ar" ? "fade-right" : "fade-left"}
        data-aos-duration="1500"
        data-aos-delay="300"
        data-aos-easing="ease-in-sine"
      >
        <span className="text-primary lg:text-[35px] xl:text-[40px] text-[40px] font-normal lg:leading-[70px] xl:leading-[80px] leading-[70px]">
          {title}
        </span>
        <p
          dangerouslySetInnerHTML={{ __html: discription }}
          className="text-paragraph lg:text-[15px] xl:text-[20px] text-[15px] lg:leading-[25px] xl:leading-[40px] font-light w-full  leading-[20px]"
        ></p>
      </div>
    </div>
  );
};

export default AboutSection;