import {
  Label
} from "./chunk-IT6Y66F5.js";
import {
  Spacing
} from "./chunk-E5DUKMCU.js";

// src/components/Radio.tsx
import styled from "@emotion/styled";
import { useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
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)) });
}
var RadioContainer = styled.div`
  label: flex;
  flex-direction: column;
`;
var RadioRow = styled.label`
  display: flex;
  align-items: center;
  gap: ${Spacing.px.sm};
`;
var RadioInput = styled.input``;

export {
  Radio
};
