import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './ConditionalDropdown.scss';
import Typography from '../Typography';
import classNames from 'classnames';
const OptionsDropdown = ({ onSelectVariable, dropdownPosition, filteredOptions = [], position = 'relative', width = '300px', zIndex = 1000, }) => {
    return (_jsxs("div", { className: classNames('ff-variable-dropdown', position), style: dropdownPosition
            ? {
                top: dropdownPosition.top + 30,
                left: dropdownPosition.left - 30,
                width,
                zIndex,
            }
            : { width, zIndex, height: '350px' }, children: [filteredOptions?.map((option) => {
                return (_jsx("div", { className: "ff-variable-option", onClick: () => onSelectVariable(option), children: _jsx(Typography, { as: "span", fontSize: 14, children: option?.name }) }, option?.id));
            }), filteredOptions?.length === 0 && (_jsx("div", { className: "ff-variable-option", children: _jsx(Typography, { as: "span", fontSize: 14, children: "No Option" }) }))] }));
};
export default OptionsDropdown;
//# sourceMappingURL=OptionsDropdown.js.map