import { jsx as _jsx } from "react/jsx-runtime";
import React, { useCallback } from "react";
import { twMerge } from "tailwind-merge";
export const Menu = ({ options, onOptionSelected, getOptionLabel, renderOption, className, style, itemClassName, }) => {
    const labelGetter = useCallback((item) => {
        if (getOptionLabel)
            return getOptionLabel(item);
        const anyItem = item;
        return (anyItem.label ?? "").toString();
    }, [getOptionLabel]);
    const handleOptionClick = (item) => {
        onOptionSelected(item);
    };
    const mergedClassName = twMerge("bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-sm)] py-1 min-w-[160px] font-[var(--font-default)] inline-block", className);
    return (_jsx("div", { className: mergedClassName, style: style, children: options.map((option, index) => {
            const key = String(option?.id ??
                labelGetter(option) ??
                index);
            return (_jsx("div", { onClick: () => handleOptionClick(option), className: twMerge("px-4 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer transition-colors flex items-center", itemClassName), children: renderOption ? renderOption(option) : labelGetter(option) }, key));
        }) }));
};
