import React from 'react'
import { Collapse } from 'antd'

const { Panel } = Collapse

interface CollapseSectionProps {
    title: string
    data: string | { key1: string; key2: number } | null | undefined
    isOpen: boolean
    onToggle: () => void
    panelKey: string
    children?: React.ReactNode
}

const CollapseSection: React.FC<CollapseSectionProps> = ({
    title,
    data,
    isOpen,
    onToggle,
    panelKey,
    children,
}) => {
    const handleHeaderClick = (): void => {
        onToggle()
    }
    return (
        <Collapse accordion activeKey={isOpen ? [panelKey] : undefined}>
            <Panel header={title} key={panelKey}>
                <div onClick={handleHeaderClick}></div>
                {(typeof data === 'string' && data !== '') ||
                (typeof data === 'object' && data !== null) ? (
                    <>
                        {typeof data === 'string' ? (
                            <p>{data}</p>
                        ) : (
                            <pre>{JSON.stringify(data, null, 2)}</pre>
                        )}
                    </>
                ) : null}
                {children}
            </Panel>
        </Collapse>
    )
}

export default CollapseSection
