import Image from "next/image";
import { useState } from "react";

interface expandDiv {
  id: number;
  title: string;
  description: string;
  bulletList: string[];
  desc: string;
  img: string;
}
interface expandDivProps{
  expandableData : expandDiv[]
}

export default function ExpandableDiv({ expandableData }: expandDivProps) {
  const [activeId, setActiveId] = useState(1);

  const handleToggle = (id: number) => {
    setActiveId(id);
  };

  return (
    <section
      className="steps-container"
      data-aos="fade-up"
      data-aos-anchor-placement="top-bottom"
      data-aos-duration="1500"
    >
      {expandableData.map((step) => {
        const isActive = activeId === step.id;

        return (
          <div
            key={step.id}
            className={`step-card overflow-hidden group ${
              isActive ? "active" : ""
            }`}
            onClick={() => handleToggle(step.id)}
          >
            {/*  <span className="step-number">
              {String(step.id).padStart(2, "0")}
            </span> */}
            {isActive && (
              <h3 className="step-title text-white text-[20px] lg:text-[30px] font-semibold">
                {step.title}
              </h3>
            )}

            {!isActive && (
              <Image
                className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-22 md:w-27 lg:w-35 max-w-full lg:grayscale group-hover:grayscale-0 transition-all duration-300"
                src={step.img}
                alt="brand logo"
                width={75}
                height={75}
              />
            )}

            {isActive && (
              <div className="lg:w-70 xl:w-95 overflow-hidden">
                <p className="step-description text-white font-semibold">
                  {step.description}
                </p>
                <div className="my-5">
                  <ul className="text-white list-disc ps-5">
                    {step.bulletList.map((list, i) => (
                      <li key={i}>{list}</li>
                    ))}
                  </ul>
                </div>
                <p className="text-white">{step.desc}</p>
              </div>
            )}

            <button
              className={`toggle-btn ${
                isActive ? "text-[#c5262e] bg-white" : "text-white bg-[#c5262e]"
              }`}
              onClick={(e) => {
                e.stopPropagation();
                handleToggle(step.id);
              }}
            >
              {isActive ? "−" : "+"}
            </button>
          </div>
        );
      })}
    </section>
  );
}