

import { DownOutlined } from '@ant-design/icons';
import { Dropdown } from "antd";
import type { MenuProps } from 'antd';

type propsType = {
    options: {
        label: string,
        onClick: any,
        icon?: React.ReactNode
    }[],
    children?: React.ReactNode,
    disabled?: boolean,
}

export default function BAMenu(props: propsType) {
    const { options, children, disabled } = props;

    const items: MenuProps['items'] = [
        ...options.map((option, index) => ({
            label: option.label,
            key: index.toString(),
            onClick: option.onClick,
            icon: option.icon
        }))
    ];

    return <>
        <Dropdown
            overlayClassName="max-h-full overflow-y-auto"
            overlayStyle={{
                maxHeight: '400px',
                overflowY: 'auto',
                backgroundColor: '#fff', // Ensures the background stays consistent
                borderRadius: '8px',
                boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08)'
            }}
            disabled={disabled}
            menu={{ items, style: { overflow: 'visible' } }}
            trigger={['click']}
        >
            <a onClick={(e) => e.preventDefault()}>
                {children ? children : <DownOutlined />}
            </a>
        </Dropdown>
    </>
}