"use client";
import { Spacing } from "../styles/tokens/spacing.js";
import { Label } from "./typography/Label.js";
import styled from "@emotion/styled";
import { useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/Radio.tsx
function Radio({ radioOptions, onChange, defaultOption }) {
	const [selectedOption, setSelectedOption] = useState(defaultOption);
	const handleRadioClick = (e) => {
		onChange(e.target.value);
		setSelectedOption(e.target.value);
	};
	return /* @__PURE__ */ jsx(RadioContainer, { children: radioOptions.map((option) => /* @__PURE__ */ jsxs(RadioRow, {
		htmlFor: option.label,
		children: [/* @__PURE__ */ jsx(RadioInput, {
			id: option.label,
			type: "radio",
			value: option.label,
			checked: selectedOption === option.label,
			onChange: handleRadioClick
		}), /* @__PURE__ */ jsx(Label, { children: option.label })]
	}, option.label)) });
}
const RadioContainer = styled.div`
  label: flex;
  flex-direction: column;
`;
const RadioRow = styled.label`
  display: flex;
  align-items: center;
  gap: ${Spacing.px.sm};
`;
const RadioInput = styled.input``;
//#endregion
export { Radio };
