import React from 'react';
import ServiceCard from './ServiceCard';


const IconChevronLeft = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M36 18C36 8.05888 27.9411 0 18 0C8.05887 0 0 8.05888 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18Z" fill="#053F31" />
    <path d="M26 18H10.5M10.5 18L16.5 12M10.5 18L16.5 24.5" stroke="#F7FAF8" strokeWidth="2" />
  </svg>

);

const IconChevronRight = () => (
  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z" fill="#DAE6DC" />
    <path d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5" stroke="#053F31" strokeWidth="2" />
  </svg>

);

type WasteManagementServiceItem = {
  title: string;
  description?: string;
  list?: string[];
  svg?: string;
};

export type WasteManagementData = {
  title?: string;
  description?: string;
  services?: WasteManagementServiceItem[];
};


const WasteManagement = ({ data }: { data?: WasteManagementData }) => {
  const [currentSlide, setCurrentSlide] = React.useState(0);

  const renderSvgIcon = (svg?: string) =>
    svg ? (
      <div dangerouslySetInnerHTML={{ __html: svg }} style={{ padding: "15px"}} />
    ) : undefined;

  const servicesToRender = (data?.services ?? []).map((item) => ({
    title: item.title,
    description: item.description,
    list: item.list ?? [],
    icon: renderSvgIcon(item.svg),
  }));

  const nextSlide = () => {
    setCurrentSlide((prev) => {
      const n = servicesToRender.length;
      if (n <= 0) return 0;
      return (prev + 1) % n;
    });
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => {
      const n = servicesToRender.length;
      if (n <= 0) return 0;
      return (prev - 1 + n) % n;
    });
  };

  return (
    <section className="md:px-[30px] mb-[50px] sm:mb-12 md:mb-14 lg:mb-16 xl:mb-[70px] ">
      <div className="xl:max-w-[1440px] 2xl:max-w-[1920px] mx-auto">

        <div className="flex flex-col lg:flex-row justify-between items-center lg:items-end mb-[30px]  ">
          <h2 className="font-lexend font-extralight text-center lg:text-left leading-[55px] text-black max-w-[495px]">
            {(() => {
              const words = String(data?.title ?? "").trim().split(/\s+/).filter(Boolean);
              if (words.length <= 2) return data?.title;
              return (
                <>
                  {words.slice(0, 2).join(" ")}{" "}
                  <span className="font-medium">{words.slice(2).join(" ")}</span>
                </>
              );
            })()}
          </h2>
          <p className="md:max-w-[534px] py-[9px] text-[20px]! text-center lg:text-right text-[#424242] font-light leading-relaxed self-start md:self-center lg:self-end">
            {data?.description}
          </p>
        </div>

        <div className="md:hidden">
          <div className="overflow-hidden">
            <div
              className="flex transition-transform duration-300 ease-in-out"
              style={{ transform: `translateX(-${currentSlide * 100}%)` }}
            >
              {servicesToRender.map((service, index) => (
                <div key={index} className="w-full shrink-0">
                  <ServiceCard
                    icon={service.icon}
                    title={service.title}
                    description={service.description}
                    list={service.list}
                    className="bg-[#F7FAF8]"
                  />
                </div>
              ))}
            </div>
          </div>

          <div className="flex justify-center items-center gap-3 mt-8">
            <button
              onClick={prevSlide}
              aria-label="Previous slide"
            >
              <IconChevronLeft />
            </button>

            <button
              onClick={nextSlide}
              aria-label="Next slide"
            >
              <IconChevronRight />
            </button>
          </div>
        </div>

        <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-[15px]">
          {servicesToRender.map((service, index) => (
            <ServiceCard
              key={index}
              icon={service.icon}
              title={service.title}
              description={service.description}
              list={service.list}
              className="bg-[#F7FAF8]"
            />
          ))}
        </div>

      </div>
    </section>
  );
};

export default WasteManagement;