import clsx from 'clsx'
import { useState } from 'react'

export function AdvancedPanel(props: { children: any }) {
  const { children } = props
  const [collapsed, setCollapsed] = useState(true)

  return (
    <div
      tabIndex={0}
      className={clsx(
        'cursor-pointer relative collapse collapse-arrow',
        collapsed ? 'collapse-close' : 'collapse-open'
      )}
    >
      <div onClick={() => setCollapsed((collapsed) => !collapsed)}>
        <div className="mt-4 mr-6 text-sm text-gray-400 text-right">
          Advanced
        </div>
        <div
          className="collapse-title p-0 absolute w-0 h-0 min-h-0"
          style={{
            top: -2,
            right: -15,
            color: '#9ca3af' /* gray-400 */,
          }}
        />
      </div>

      <div className="collapse-content !p-0 m-0 !bg-transparent">
        {children}
      </div>
    </div>
  )
}