import {
    Radio,
    RadioGroup,
    type OptionProps,
    type RadioGroupProps,
} from '@blueprintjs/core';
import { createBoard } from '@wixc3/react-board';
import { useState } from 'react';
// board cover
import cover from '../../../../assets/form-controls/radio.svg';

export default createBoard({
    name: 'Radio',
    Board: () => {
        const options: OptionProps[] = [
            { label: 'Soup', value: 'Soup' },
            { label: 'Salad', value: 'Salad' },
            { label: 'Sandwitch', value: 'Sandwitch' },
        ];

        const [selectedValue, setSelectedValue] = useState(options[0].value);

        const handleChange: RadioGroupProps['onChange'] = (e) => {
            setSelectedValue(e.currentTarget.value);
        };

        return (
            <RadioGroup
                label="Determine lunch"
                name="group"
                selectedValue={selectedValue}
                onChange={handleChange}
            >
                {options.map((option) => (
                    <Radio
                        label={option.label}
                        name="group"
                        key={option.value}
                        value={option.value}
                    />
                ))}
            </RadioGroup>
        );
    },
    tags: ['radio', 'form', 'controls'],
    cover,
    environmentProps: {
        windowWidth: 300,
    },
});
