import style from "./style.module.scss";
import {ChangeEvent} from "rollup";
import {JSX} from "preact";

export function Radio<Choices extends Record<string, string>>(props: {
    name: string,
    choices: Choices,
    value: keyof Choices,
    onChoose: (choice: keyof Choices) => void,
}) {
    let buttons = [];

    for (const [key, value] of Object.entries(props.choices)) {
        console.log(props.value)
        buttons.push(
            <div className={style.group}>
                <input
                    type="radio"
                    name={props.name}
                    id={key}
                    autoComplete="off"
                    value={key}
                    checked={props.value === key}
                    onClick={e => {
                        props.onChoose(key);
                    }}
                />
                <label
                    htmlFor={key}
                >
                    {value}
                </label>
            </div>
        )
    }


    return (
        <div className={style.container}>
            {buttons}
        </div>
    );
}