import React, { useState, ReactNode, useRef, useEffect } from 'react';
import { animated, useSpring } from '@react-spring/web';

interface DropdownProps {
    title: ReactNode;
    open?: boolean;
    className?: string;
    contentWrapperClassName?: string;
    bottomPadding?: number;
    children: ReactNode;
}

const Dropdown: React.FC<DropdownProps> = ({
    title,
    open = false,
    className = "w-full text-left font-semibold flex justify-between items-center p-4",
    contentWrapperClassName = "px-6",
    bottomPadding = 12,
    children
}) => {
    const [isOpen, setIsOpen] = useState<boolean>(open);
    const contentRef = useRef<HTMLDivElement>(null);
    const [contentHeight, setContentHeight] = useState<number>(0);

    useEffect(() => {
        let resizeObserver: ResizeObserver | null = null;
        
        if (contentRef.current) {
            resizeObserver = new ResizeObserver(entries => {
                for (let entry of entries) {
                    if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
                        const height = entry.borderBoxSize[0].blockSize;
                        setContentHeight(height + bottomPadding);
                    } else {
                        // Fallback for browsers that don't support borderBoxSize
                        const height = entry.contentRect.height;
                        setContentHeight(height + bottomPadding);
                    }
                }
            });
    
            resizeObserver.observe(contentRef.current);
        }
    
        return () => {
            if (resizeObserver) {
                resizeObserver.disconnect();
            }
        };
    }, [bottomPadding]);

    const springProps = useSpring({
        height: isOpen ? contentHeight : 0,
        opacity: isOpen ? 1 : 0,
        config: { tension: 300, friction: 30 }
    });

    return (
        <>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className={className}
            >
                {title}
                <svg
                    className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <animated.div style={springProps} className="overflow-hidden">
                <div ref={contentRef} className={contentWrapperClassName} style={{paddingBottom: bottomPadding}}>
                    {children}
                </div>
            </animated.div>
        </>
    );
};

export default Dropdown;