import React, { forwardRef } from 'react';
import { Menu } from '@headlessui/react';
import styles from './dropdown.module.css';
import classNames from 'classnames';

interface Props {
    children: React.ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
    danger?: boolean;
    disabled?: boolean;
    className?: string;
    icon?: JSX.Element;
    onClick?: (e: React.MouseEvent) => void;
}

const DropdownItem = forwardRef<HTMLAnchorElement, Props>(({
    disabled,
    danger,
    className,
    onClick,
    children,
    icon: IconComponent,
}, ref) => {
    return (
        <Menu.Item disabled={disabled}>
            {({ disabled, active }) => (
                <a
                    ref={ref}
                    href={'#'}
                    className={classNames(styles.menu_item, {
                        [styles.danger]: danger,
                        [styles.disabled]: disabled,
                    }, className)}
                    onClick={onClick}
                >
                    {IconComponent}
                    {typeof children === 'function' ? children({ disabled, active }) : children}
                </a>
            )}
        </Menu.Item>
    );
});

export default DropdownItem;