/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable import/prefer-default-export */
import classNames from 'classnames'
import { CSSProperties, ReactNode } from 'react'

interface DropDownProps {
  content: ReactNode
  trigger: ReactNode
  onHover: boolean
  width?: string
  marginTop?: string
  className?: string
  ulClassName?: string
  useFixedPosition?: boolean
  fixedPositionStyle?: CSSProperties
  placement?: 'top' | 'bottom'
}

export const DropDown = (props: DropDownProps) => {
  const {
    content,
    trigger,
    onHover,
    width,
    marginTop,
    ulClassName,
    useFixedPosition,
    fixedPositionStyle,
    placement = 'bottom',
  } = props

  return (
    <div
      className={classNames(
        'dropdown dropdown-end w-full',
        onHover && 'dropdown-hover',
        placement === 'top' && 'dropdown-top',
      )}
    >
      {' '}
      <div tabIndex={0}>{trigger}</div>
      <ul
        tabIndex={0}
        className={classNames(
          'dropdown-content menu shadow bg-base-100 rounded-box min-h-16 first-letter:flex flex-col gap-2 p-4',
          // Don't apply width class when using fixed positioning (width comes from style)
          !useFixedPosition && (width || 'w-72'),
          marginTop && marginTop,
          useFixedPosition && '!fixed z-[9999]',
          ulClassName,
        )}
        style={useFixedPosition ? fixedPositionStyle : undefined}
      >
        {content}
      </ul>
    </div>
  )
}