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

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

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

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