import { AddCircle } from 'iconsax-react'
import { FC, useState, useRef, useEffect } from 'react'

type Props = {
    title: string
    content: string
}

const Accordion: FC<Props> = ({ title, content }) => {
    const [isOpen, setIsOpen] = useState(false)
    const contentRef = useRef<HTMLDivElement>(null)
    const [contentHeight, setContentHeight] = useState(0)

    useEffect(() => {
        if (contentRef.current) {
            setContentHeight(isOpen ? contentRef.current.scrollHeight : 0)
        }
    }, [isOpen])

    return (
        <div className='bg-white rounded-xl p-3 flex-1 h-fit'>
            <div className='flex gap-2 justify-between items-center cursor-pointer accordion-trigger' onClick={() => setIsOpen(!isOpen)}>
                <div className='font-bold xl:text-sm text-xs'>
                    {title}
                </div>

                <AddCircle
                    size={24}
                    color='black'
                    className={`transition-transform duration-300 accordion-icon ${isOpen ? 'rotate-45' : 'rotate-0'}`}
                />
            </div>
            <div
                ref={contentRef}
                className='overflow-hidden transition-all duration-300 accordion-content'
                style={{ maxHeight: `${contentHeight}px` }}
            >
                <p className='text-sm leading-6 py-2 text-[#7D818C]'>
                    {content}
                </p>
            </div>
        </div>
    )
}

export default Accordion