import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
import { Check, ChevronDown } from "lucide-react";
import clsx from "clsx";
import { Fragment } from "react";
export function DropdownList({ items, value, onChange }) {
    return (_jsx(Listbox, { value: value, onChange: onChange, children: ({ open }) => (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "inline-flex divide-x divide-indigo-700 rounded-md shadow-2xs", children: [_jsxs("div", { className: "inline-flex items-center gap-x-1.5 rounded-l-md bg-indigo-600 px-3 py-2 text-white shadow-2xs", children: [value.name && _jsx(Check, { className: "-ml-0.5 size-5", "aria-hidden": "true" }), _jsx("p", { className: "text-sm font-semibold", children: value.name || "" })] }), _jsxs(ListboxButton, { className: "inline-flex items-center rounded-l-none rounded-r-md bg-indigo-600 p-2 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-gray-50", children: [_jsx("span", { className: "sr-only", children: "Change selection" }), _jsx(ChevronDown, { className: "size-5 text-white", "aria-hidden": "true" })] })] }), _jsx(Transition, { show: open, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(ListboxOptions, { className: "absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden", children: items.map((option) => (_jsx(ListboxOption, { className: ({ active }) => clsx(active ? 'bg-indigo-600 text-white' : 'text-gray-900', 'cursor-default select-none p-4 text-sm'), value: option, children: ({ selected, active }) => (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("p", { className: selected ? 'font-semibold' : 'font-normal', children: option.name }), selected ? (_jsx("span", { className: active ? 'text-white' : 'text-indigo-600', children: _jsx(Check, { className: "size-5", "aria-hidden": "true" }) })) : null] }), _jsx("p", { className: clsx(active ? 'text-indigo-200' : 'text-gray-500', 'mt-2'), children: option.description })] })) }, option.id))) }) })] })) }));
}
//# sourceMappingURL=DropdownList.js.map