import { Splide, SplideSlide } from "@splidejs/react-splide";
import React from "react";

interface marketingAndAdProcessData {
  id: number;
  title: string;
  description: string;
}
interface adProcessProps{
  adProcess: marketingAndAdProcessData[]
}

function AdvertisingProcess({adProcess}: adProcessProps) {
  return (
    <div
    data-aos="fade-up"
    data-aos-anchor-placement="top-bottom"
    data-aos-duration="1000"
    >
      <Splide
        options={{
          perPage: 4,
          perMove: 1,
          gap: "1rem",
          pagination: false,
          classes: {
            arrows: "splide__arrows cds absolute -bottom-10 left-1/2 -translate-x-1/2 w-25",
            arrow: "splide__arrow !bg-[#c4262e] !rounded-lg",
          },
          breakpoints: {
            1024: { perPage: 3 },
            768: { perPage: 2 },
            640: { perPage: 1 },
          },
        }}
      >
        {adProcess.map((item) => (
          <SplideSlide key={item.id}>
            <div className="form-box border-2 border-transparent h-full rounded-2xl p-[0px_20px_20px_20px]">
              <span className="bg-[#c4262e] text-[19px] text-white font-semibold p-3 rounded-b-2xl inline-block mb-3">
                {item.id}
              </span>

              <h3 className="text-[22px] font-bold">{item.title}</h3>

              <p className="text-gray-700 text-[17px] font-semibold">
                {item.description}
              </p>
            </div>
          </SplideSlide>
        ))}
      </Splide>
    </div>
  );
}

export default AdvertisingProcess;