"use client";

import { useState } from "react";

interface AccordionItem {
  title: string;
  content: string;
}

interface AccordionProps {
  items: AccordionItem[];
  borderColor?: string;
}

export default function Accordion({ items, borderColor = "#95C11F" }: AccordionProps) {
  const [active, setActive] = useState<number | null>(0);

  return (
    <div className="max-w-2xl mx-auto space-y-4 ml-0">
      {items.map((item, index) => {
        const open = active === index;

        return (
          <div
            key={index}
            className="border rounded-[40px] overflow-hidden border-[3px] transition-colors duration-300"
            style={{
              borderColor: borderColor,
              backgroundColor: open ? "white" : borderColor,
            }}
          >
            <button
              onClick={() => setActive(open ? null : index)}
              className="w-full flex justify-between items-center px-6 py-4 text-left transition cursor-pointer"
            >
              <span className={`font-regular text-[18px] w-[90%] md:text-[18px] lg:text-[20px] uppercase transition-colors ${open ? "text-white acc-open" : "text-white"}`} style={{ color: open ? borderColor : "white" }}>
                {item.title}
              </span>

              <span className="text-[40px] md:text-2xl transition-transform transition-colors" style={{ color: open ? "#58585A" : "white", transform: open ? "rotate(45deg)" : "rotate(0deg)" }}>
                +
              </span>
            </button>

            <div
              className={`overflow-hidden transition-all duration-300 ease-in-out ${
                open ? "max-h-auto opacity-100" : "max-h-0 opacity-0"
              }`}
            >
              <div className="px-6 pb-6 text-[18px] xl:text-[22px] md:text-[16px] text-[#58585A] font-light max-[360px]:h-[180px] max-[767px]:overflow-y-scroll max-[767px]:h-auto max-[330px]:text-[16px]">
                {item.content}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}