"use client";

// This is now a server component (no )
import React from "react";
import Image from "next/image";
import EmblaCarouselClient from "./EmblaCarouselClient";
import type { Activity } from "@/src/lib/services/workshopService";

interface ClientAdditionalActivitiesProps {
  data: Activity[];
  mainHeading?: string;
}

export default function ClientAdditionalActivities({ data, mainHeading = "Additional Activities" }: ClientAdditionalActivitiesProps) {
  return (
    <section className="relative w-full overflow-hidden bg-transparent z-0  mt-[-170px] md:mt-[-140px] lg:mt-[-170px] px-1 md:px-6 lg:px-16 xl:px-16 2xl:px-1 z-1 client-c1">
      <div className="absolute inset-0 w-full h-[900px] -z-10">
        {/* Desktop */}
        <Image
          src="https://yefranchisees.b-cdn.net/frontend/additional activities.png"
          alt="Additional Activities background"
          fill
          className="object-cover object-top hidden lg:block"
          priority
        />

        {/* Tablet */}
        <Image
          src="https://yefranchisees.b-cdn.net/frontend/additional activities.png"
          alt="Additional Activities tablet background"
          fill
          className="object-cover object-top hidden md:block lg:hidden"
          priority
        />

        {/* Mobile */}
        <Image
          src="https://yefranchisees.b-cdn.net/frontend/mobile/additionalactivities-mob.svg"
          alt="Additional Activities mobile background"
          fill
          className="object-cover object-top block md:hidden"
          priority
        />
      </div>

      <div className="w-full max-w-[1300px] mx-auto sm:mt-10 px-3 2xl:px-0 relative z-10 md:mt-33 mt-23 2xl:mt-50">
        <div className=" md:text-left mb-[30px] mt-40">
          <h2 className="text-[29px] md:text-[30px] xl:text-[50px] lg:text-[50px] 2xl:text-5xl font-bold text-[#58585A] uppercase tracking-wide max-[400px]:text-[26px]">
            {mainHeading}
          </h2>
        </div>

        {/* Render the client carousel here */}
        <EmblaCarouselClient data={data} />
      </div>
    </section>
  );
}