import type { ElementType, FC, HTMLAttributes } from 'react';
import classnames from 'classnames';
import React, { useContext } from 'react';
import { DropdownContext } from '../Dropdown/DropdownContext';

export interface DropdownMenuProps extends HTMLAttributes<HTMLElement> {
  tag?: ElementType;
}

const DropdownMenu: FC<DropdownMenuProps> = ({ className, tag: Tag = 'div', ...props }) => {
  const { isOpen } = useContext(DropdownContext);

  return isOpen ? (
    <Tag className={classnames('dropdown-menu', className)} data-testid="DropdownMenu" {...props} />
  ) : null;
};

export default DropdownMenu;