/* eslint-disable @next/next/no-img-element */

import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";

import { SectionUnderline } from "../ui/section-underline";
import type { ServiceCard } from "./service-card";
import { ServicesSlider } from "./services-slider";

type ServiceCardVariant = "image" | "icon";

type ServicesSectionProps = {
  title?: string;
  ctaLabel?: string;
  ctaHref?: string;
  services: ServiceCard[];
  variant?: ServiceCardVariant;
  className?: string;
  autoPlay?: boolean;
  autoPlayInterval?: number;
  showCta?: boolean;
};

export function ServicesSection({
  title,
  ctaLabel,
  ctaHref = "#",
  services,
  variant = "image",
  className,
  autoPlay = true,
  autoPlayInterval = 4500,
  showCta = true,
}: ServicesSectionProps) {
  const t = useTranslations("servicesSection");

  const sectionTitle = title || t("title");
  const sectionCtaLabel = ctaLabel || t("ctaLabel");
  return (
    <section
      className={cn(
        "w-full bg-[#f3f8fb] px-4 py-14 sm:px-6 sm:py-16 md:px-8 md:py-20 lg:px-12 xl:px-[120px]",
        className
      )}
    >
      <div className="mx-auto flex max-w-[1280px] flex-col items-center gap-8 text-start">

        <div className="flex flex-col items-center gap-2">

          <h2 className="text-3xl font-bold text-[#202020] sm:text-[32px] md:text-[36px] lg:text-[40px]">
            {sectionTitle}
          </h2>
          <SectionUnderline className="w-[220px]" />
        </div>

        <ServicesSlider
          services={services}
          variant={variant}
          autoPlay={autoPlay}
          autoPlayInterval={autoPlayInterval}
        />

        {showCta && (
          <Link href={ctaHref} className="flex justify-center">
            <Button className="h-12 gap-2 rounded-[12px] border border-white bg-[#1c75bc] px-6 text-base font-semibold text-white hover:bg-[#1c75bc]/90 flex-row">
              <span>{sectionCtaLabel}</span>
              <img
                src="/images/who-we-are/arrow-right.svg"
                alt=""
                className="rtl:rotate-180"
                width={20}
                height={20}
              />
            </Button>
          </Link>
        )}
      </div>
    </section>
  );
}

export type { ServiceCard };