ToggleCollapse

import { IconButton, Tooltip } from '@mui/material'
import Iconify from 'src/components/Iconify'
import useToggle from 'src/hooks/useToggle'

export default function ToggleCollapse({
  children,
  helperText = 'Filter list',
  baseIcon = 'lucide:more-horizontal',
}) {
  const { toggle: open, onToggle: setOpen } = useToggle()

  const icon = open ? 'lucide:x' : baseIcon

  return (
    <div className="block">
      <div className="flex items-center">
        <Tooltip title={helperText}>
          <IconButton color="inherit" onClick={setOpen}>
            <Iconify icon={icon} />
          </IconButton>
        </Tooltip>

        <div className={`italic text-sm ${open ? 'hidden' : 'block'}`}>
          Xem thêm các điều kiện lọc <span className="font-bold hover:cursor-pointer hover:underline" onClick={setOpen}>tại đây</span>
        </div>
      </div>

      <div
        className={`flex ${
          open
            ? 'h-full opacity-100 mt-2'
            : 'h-0 opacity-0 p-0 m-0 select-none pointer-events-none cursor-default'
        } transition-all`}
      >
        {children}
      </div>
    </div>
  )
}