"use client";

import { useState } from "react";

type AccordionItem = {
  id: string;
  title: string;
  content: React.ReactNode;
};

type LegalAccordionProps = {
  items: AccordionItem[];
};

export default function LegalAccordion({
  items,
}: LegalAccordionProps) {
  const [openId, setOpenId] = useState<string | null>(null);

  const toggleItem = (id: string) => {
    setOpenId((current) => (current === id ? null : id));
  };

  return (
    <div className="flex flex-col gap-[10px]">
      {items.map((item) => {
        const isOpen = openId === item.id;

        return (
          <div
            key={item.id}
            className={`
              overflow-hidden
              rounded-[14px]
              border
              bg-white
              transition-all
              duration-300
              ease-out

              ${
                isOpen
                  ? "border-[#e6dce8] shadow-[0_8px_24px_rgba(46,0,48,0.05)]"
                  : "border-[#ece6ed]"
              }
            `}
          >
            <button
              type="button"
              onClick={() => toggleItem(item.id)}
              className="
                flex
                w-full
                items-center
                gap-[14px]
                px-[22px]
                py-[16px]
                text-left

                sm:px-[24px]
                sm:py-[17px]

                md:px-[22px]
                md:py-[17px]
              "
              aria-expanded={isOpen}
            >
              {/* Plus / Minus box */}
              <span
                className="
                  flex
                  h-[26px]
                  w-[26px]
                  shrink-0
                  items-center
                  justify-center
                  rounded-[6px]
                  border
                  border-[#e5dce8]
                  bg-[#faf6fc]
                  text-[16px]
                  font-medium
                  leading-none
                  text-[#ed008c]
                "
              >
                {isOpen ? "−" : "+"}
              </span>

              <span
                className="
                  text-[14px]
                  font-[700]
                  leading-[1.35]
                  tracking-[-0.02em]
                  text-[#250022]

                  sm:text-[14.5px]
                "
              >
                {item.title}
              </span>
            </button>

            {/* Animated open section */}
            <div
              className={`
                grid
                transition-[grid-template-rows]
                duration-500
                ease-in-out

                ${
                  isOpen
                    ? "grid-rows-[1fr]"
                    : "grid-rows-[0fr]"
                }
              `}
            >
              <div className="overflow-hidden">
                <div
                  className="
                    border-t-2
                    border-[#f00084]
                    px-[58px]
                    pb-[26px]
                    pt-[24px]

                    sm:px-[60px]
                    sm:pb-[30px]

                    md:px-[58px]
                    md:pb-[32px]

                    lg:px-[58px]
                  "
                >
                  <div
                    className="
                      text-[13px]
                      leading-[1.9]
                      text-[#5f5367]

                      sm:text-[13.5px]
                    "
                  >
                    {item.content}
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}