import React from 'react';
import { Radio } from '../../src/primitive-components/components';

export default function Radios() {
    return (
        <div className={'m3 m3-wrapper'}>
            <h1> Radio </h1>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    width: '100%',
                    gap: '5em',
                    justifyContent: 'center',
                }}
            >
                <div>
                    <h2> Default </h2>
                    <div style={{ display: 'flex', gap: '2em' }}>
                        <Radio centralRipple />
                        <Radio defaultChecked />
                    </div>
                </div>
                <div>
                    <h2> Disabled </h2>
                    <div style={{ display: 'flex', gap: '2em' }}>
                        <Radio disabled />
                        <Radio defaultChecked disabled />
                    </div>
                </div>
                <div>
                    <h2> With Label </h2>
                    <form style={{ display: 'flex', gap: '2em' }}>
                        <Radio> Label </Radio>
                        <Radio defaultChecked> Label </Radio>
                    </form>
                </div>
            </div>
        </div>
    );
}