import React, { useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const RadioGroup = () => {
  const [color, setColor] = useState("red");
  const colorOptions = ["red", "blue", "yellow", "pink"];

  const [size, setSize] = useState("small");
  const sizeOptions = ["small", "medium", "large"];

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Colors
        {colorOptions.map((option) => (
          <label key={option}>
            <input
              type="radio"
              value={option}
              checked={color === option}
              onChange={() => setColor(option)}
            />
            {option}
          </label>
        ))}
      </div>

      <div>
        Sizes
        {sizeOptions.map((option) => (
          <label key={option}>
            <input
              type="radio"
              value={option}
              checked={size === option}
              onChange={() => setSize(option)}
            />
            {option}
          </label>
        ))}
      </div>
    </div>
  );
};


const App = () => {
  return(
    <RadioGroup />
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))