import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useRef } from "react";
import { cn } from "#scalars";
import { Button } from "../../../../../scalars/components/fragments/button/button.js";
import { useTimeSelector } from "./use-time-selector.js";
const TimeSelector = ({ options, selectedValue, onSelect, isCyclic = true, }) => {
    const selectedRef = React.useRef(null);
    const containerRef = useRef(null);
    const { displayOptions, handleExplicitSelection } = useTimeSelector({
        options,
        selectedValue,
        onSelect,
        isCyclic,
        containerRef,
        selectedRef,
    });
    return (_jsxs("div", { className: "relative w-[43px] overflow-hidden", children: [_jsxs("div", { ref: containerRef, className: "absolute inset-0 flex flex-col items-center gap-1 overflow-hidden overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar-thumb]:!hidden [&::-webkit-scrollbar-track]:!hidden [&::-webkit-scrollbar]:!hidden", children: [isCyclic && _jsx("div", { className: "h-[60px]" }), displayOptions.map((option, index) => {
                        // Determine if this is the middle set of options (for proper reference)
                        const isMiddleSet = index >= options.length && index < options.length * 2;
                        const shouldUseRef = option === selectedValue && isMiddleSet;
                        return (_jsx(Button, { ref: shouldUseRef ? selectedRef : null, variant: "ghost", onClick: () => handleExplicitSelection(option), className: cn("flex h-[37px] cursor-pointer items-center justify-center text-[12px] leading-[20px]", selectedValue === option
                                ? "rounded-[6px] border border-gray-300 bg-white px-3 py-2 font-normal text-gray-900"
                                : "h-[20px] w-[16px] font-normal text-gray-900"), children: option }, `${option}-${index}`));
                    })] }), isCyclic && _jsx("div", { className: "h-[60px]" })] }));
};
export default TimeSelector;
//# sourceMappingURL=time-selector.js.map