import { Button, Checkbox, Input, RadioGroup } from "@/Components";
import React, { ReactNode } from "react";
import { ReactElement, useState } from "react";


const CheckboxWrap = ({ value, setValue, label }: { value: boolean, setValue: (v: boolean) => void, label?: ReactNode }): ReactElement => {
    return <Checkbox
        id='checkbox-test'
        testId='checkbox-test'
        value={value}
        label={label ?? 'Checkbox test'}
        description='This is a checkbox test'
        onChange={(newValue) => setValue(newValue)}
    />
}

const CheckboxTest = (): ReactElement => {
    const [v, setV] = useState<{ bool: boolean }>({ bool: false });
    return <div className='p-10 flex flex-col gap-4'>
        <p> {String(v.bool)}</p>
        <CheckboxWrap
            label={<>This is the label <Button size='xs' className='max-w-25' onClick={(e) => {
                e.preventDefault();
                setV({ bool: true })
            }}>Set to true</Button></>}
            value={v.bool}
            setValue={(e) => {
                setV({ bool: e })
            }} />

    </div>
}

export default CheckboxTest