import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import {
    Button,
    FAB,
    IconButton,
} from '../src/primitive-components/components';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';

export default function Page() {
    return (
        <main>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '8px',
                }}
            >
                <div
                    style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
                >
                    <Card variant={'outlined'}>
                        <CardFooter>
                            <SegmentedButtons selectable={true}>
                                <SegmentButton
                                    fillIcon={1}
                                    icon={'change_history'}
                                >
                                    Label 1
                                </SegmentButton>
                                <SegmentButton
                                    fillIcon={1}
                                    icon={'change_history'}
                                    iconPlace={'right'}
                                    selectable={false}
                                >
                                    Not selectable
                                </SegmentButton>
                                <SegmentButton
                                    fillIcon={1}
                                    icon={'change_history'}
                                    iconPlace={'right'}
                                    iconSize={48}
                                    svgSize={48}
                                >
                                    Label 3
                                </SegmentButton>
                                <SegmentButton disabled>Label 4</SegmentButton>
                            </SegmentedButtons>
                            <Button ripple={false}>Filled button</Button>
                            <Button ripple={false} variant={'outlined'}>
                                Outlined button
                            </Button>
                            <Button ripple={false} variant={'elevated'}>
                                Elevated button
                            </Button>
                            <Button ripple={false} variant={'text'}>
                                Text button
                            </Button>
                            <Button ripple={false} variant={'tonal'}>
                                Tonal button
                            </Button>
                            <FAB icon={'edit'} ripple={false}></FAB>
                            <FAB icon={'edit'}></FAB>
                            <IconButton
                                icon={'settings'}
                                variant={'filled'}
                            ></IconButton>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </main>
    );
}
