"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef } from "react";
import { cn } from "../../../utils/cn";
export const GlassRadioGroup = ({ name, options, selectedValue, onChange, className, testId, }) => {
    const gliderRef = useRef(null);
    const containerRef = useRef(null);
    useEffect(() => {
        if (!gliderRef.current || !containerRef.current)
            return;
        const selectedIndex = options.findIndex((opt) => opt.value === selectedValue);
        if (selectedIndex === -1)
            return;
        const container = containerRef.current;
        const glider = gliderRef.current;
        const labels = container.querySelectorAll("label");
        const selectedLabel = labels[selectedIndex];
        if (!selectedLabel)
            return;
        const containerRect = container.getBoundingClientRect();
        const labelRect = selectedLabel.getBoundingClientRect();
        const left = labelRect.left - containerRect.left;
        const width = labelRect.width;
        glider.style.transform = `translateX(${left}px)`;
        glider.style.width = `${width}px`;
    }, [selectedValue, options]);
    return (_jsxs("div", { ref: containerRef, className: cn("glass-radio-group", className), role: "radiogroup", "data-testid": testId, children: [_jsx("div", { className: "glass-glider", ref: gliderRef }), options.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", id: option.id, name: name, value: option.value, checked: selectedValue === option.value, onChange: () => onChange(option.value), className: "sr-only", "data-testid": testId ? `${testId}.radio.${option.id}.${index}` : undefined }), _jsx("label", { htmlFor: option.id, "data-testid": testId ? `${testId}.label.${option.id}.${index}` : undefined, children: option.label })] }, option.id ? String(option.id) : `option-${index}`)))] }));
};
export default GlassRadioGroup;
