import Image from "next/image";
import TitleWithLine from "../../molecules/title-with-line/TitleWithLine";
import { useTranslation } from "next-i18next";
import Button from "../../atoms/button";
import { HomeSlide } from "../../molecules/home-slide-switcher/HomeSlideSwitcher";
import Link from "next/link";

const HomeOurServices = ({ title, description, background }: any) => {
  const { t } = useTranslation("common");

  return (
    <div id={HomeSlide.OurServices} className="max-lg:py-20 h-full relative">
      <Image src={background} alt="" fill className="-z-[2] object-cover" sizes="100vw"></Image>

      <div className="absolute top-0 right-0 left-0 bottom-0 [background:var(--gradient-0)] opacity-90 -z-[1]"></div>

      <div className="lg:w-2/3 h-full flex flex-col justify-center text-white">
        <div className="container">
          <div className="mb-8">
            <TitleWithLine borderClass="border-white">
              <h1 className="text-4xl lg:text-5xl">{t("Our Services")}</h1>
            </TitleWithLine>
          </div>

          <div className="font-bold text-2xl mb-4">{title}</div>

          <div className="mb-8" dangerouslySetInnerHTML={{ __html: description }}></div>

          <div className="max-lg:flex justify-center">
            <Link href="/services">
              <Button>{t("Read More")}</Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomeOurServices;