import { useState } from "react";
import AnimateHeight from "react-animate-height";
import IconCaretDown from "./Icon/IconCaretDown";
// import IconCaret

interface Item {
    id: string;
    title: React.ReactNode; // ✅ JSX support
    icon?: React.ReactNode;
    content: React.ReactNode;

    defaultOpen?: boolean; // ✅ control open state per item
}

interface Props {
    items: Item[];
}

const Accordian = ({ items }: Props) => {
    const getInitialActive = () => {
        const firstOpen = items.find((item) => item.defaultOpen);
        return firstOpen ? firstOpen.id : "";
    };

    const [active, setActive] = useState<string>(getInitialActive);

    const toggle = (id: string) => {
        setActive((prev) => (prev === id ? "" : id));
    };

    return (
        <div className="space-y-2 font-semibold">
            {items.map((item) => {
                const isOpen = active === item.id;

                return (
                    <div
                        key={item.id}
                        className="bg-white border rounded-lg dark:border-[#1b2e4b]"
                    >
                        {/* HEADER */}
                        <button
                            type="button"
                            onClick={() => toggle(item.id)}
                            className={`p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b] ${
                                isOpen ? "!text-primary" : ""
                            }`}
                        >
                            {item.icon && (
                                <span className="ltr:mr-2 rtl:ml-2 text-primary shrink-0">
                                    {item.icon}
                                </span>
                            )}

                            {/* ✅ JSX title supported */}
                            <span className="flex-1 text-left">{item.title}</span>

                            <div
                                className={`ltr:ml-auto rtl:mr-auto transition-transform duration-200 ${
                                    isOpen ? "rotate-180" : ""
                                }`}
                            >
                                <IconCaretDown className="w-5 h-5" />
                            </div>
                        </button>

                        {/* BODY */}
                        <AnimateHeight duration={300} height={isOpen ? "auto" : 0}>
                            <div className="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
                                {item.content}
                            </div>
                        </AnimateHeight>
                    </div>
                );
            })}
        </div>
    );
};

export default Accordian;