/* eslint-disable @next/next/no-img-element */
"use client";
import { useTranslations } from "next-intl";
import React from "react";
import "./homeSlider.scss";
import LocalePath from "@/shared/LocalePath";
import OurServicesSwiper from "./OurServicesSwiper";
import { section, services } from "@/interfaces/types";
import TrackVisibility from "react-on-screen";

type Props = {
  services: { data: services[]; section: section };
};
export default function OurServices({ services }: Props) {
  const t = useTranslations();

  return (
    <section className="latest-news container  lg:px-16 px-4">
      <div className="sm:flex gap-4 items-center">
        <div className=" flex-1">
          <TrackVisibility>
            {({ isVisible }) => (
              <>
                <h2
                  className={`capitalize font-semibold text-[40px] text-start leading-[60px] mb-3 ${
                    isVisible ? "animate__animated animate__bounce" : ""
                  }`}
                >
                  {services.section.title}
                </h2>
                <h2
                  className={`text-greynormal  text-lg font-medium leading-7 text-start lg:w-3/4 ${
                    isVisible ? "animate__animated animate__bounce" : ""
                  }`}
                >
                  {services.section.description}
                </h2>
              </>
            )}
          </TrackVisibility>
        </div>
        <LocalePath
          className=" w-fit   font-semibold text-base leading-5 text-center bg-white hover:bg-thirdy whitespace-nowrap text-primary  transition-colors border-[1px] border-primary hover:border-thirdy  px-10 py-2 rounded-full inline-block mt-4 sm:mt-0"
          href="/our-services"
          data-aos="fade-left"
        >
          {t("watch services")}
        </LocalePath>
      </div>
      <OurServicesSwiper services={services.data} />
    </section>
  );
}