import React, { Fragment } from 'react';
import Fabs from './components/fabs';
import Badges from './components/badges';
import Radios from './components/radios';
import Buttons from './components/buttons';
import Switches from './components/switches';
import Checkboxes from './components/checkboxes';
import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
    ButtonLayout,
    Divider,
    SegmentedButtons,
} from '../src/primitive-components/components';

export default function Page() {
    return (
        <Fragment>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    overflowX: 'auto',
                    gap: '0em',
                }}
            >
                <h1>Google Material You UI kit</h1>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '0.5em',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <div className={'m3 m3-wrapper'}>
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                padding: '25px',
                            }}
                        >
                            <SegmentedButtons>
                                <ButtonLayout>Segment 1</ButtonLayout>
                                <ButtonLayout>Segment 2</ButtonLayout>
                            </SegmentedButtons>
                        </div>
                    </div>
                    <div
                        className={'m3 m3-wrapper'}
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                            justifyContent: 'space-evenly',
                            alignItems: 'center',
                        }}
                    >
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                padding: '25px',
                            }}
                        >
                            <Buttons />
                        </div>
                        <Divider
                            orientation={'vertical'}
                            variant={'middle-inset'}
                        />
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                padding: '25px',
                            }}
                        >
                            <IconButtons />
                        </div>
                    </div>
                    <div
                        className={'m3 m3-wrapper'}
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '0.5em',
                            justifyContent: 'space-evenly',
                            alignItems: 'center',
                        }}
                    >
                        <Checkboxes />
                        <Divider
                            orientation={'vertical'}
                            variant={'middle-inset'}
                        />
                        <Radios />
                        <Divider
                            orientation={'vertical'}
                            variant={'middle-inset'}
                        />
                        <Badges />
                    </div>
                    <Switches />
                    <TextFields />
                    <Fabs />
                </div>
            </div>
        </Fragment>
    );
}
