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>
            <Card variant={'outlined'}>
                <CardFooter>
                    <Button> Default Button </Button>
                    <Button ripple={false}> Default Button </Button>
                    <FAB icon={'edit'} variant={'secondary'} />
                    <FAB icon={'edit'} ripple={false} variant={'secondary'} />

                    <IconButton icon={'settings'} variant={'filled'} />
                    <IconButton icon={'settings'} variant={'default'} />
                    <IconButton icon={'settings'} variant={'tonal'} />
                    <IconButton icon={'settings'} variant={'outlined'} />

                    <IconButton
                        icon={'settings'}
                        toggled={{
                            selected: 'settings',
                            unselected: 'settings',
                        }}
                        variant={'filled'}
                    />
                    <IconButton
                        icon={'settings'}
                        toggled={{
                            selected: 'settings',
                            unselected: 'settings',
                        }}
                        variant={'default'}
                    />
                    <IconButton
                        icon={'settings'}
                        toggled={{
                            selected: 'settings',
                            unselected: 'settings',
                        }}
                        variant={'tonal'}
                    />
                    <IconButton
                        icon={'settings'}
                        toggled={{
                            selected: 'settings',
                            unselected: 'settings',
                        }}
                        variant={'outlined'}
                    />

                    <SegmentedButtons density={-2} selectable={true}>
                        <SegmentButton
                            fillIcon={1}
                            icon={'change_history'}
                            ripple={false}
                        >
                            Label 1
                        </SegmentButton>
                        <SegmentButton
                            fillIcon={1}
                            icon={'change_history'}
                            iconPlace={'right'}
                            ripple={false}
                            selectable={false}
                        >
                            Not selectable
                        </SegmentButton>
                        <SegmentButton
                            fillIcon={1}
                            icon={'change_history'}
                            iconPlace={'right'}
                            ripple={false}
                        >
                            Label 3
                        </SegmentButton>
                        <SegmentButton disabled>Label 4</SegmentButton>
                    </SegmentedButtons>
                </CardFooter>
            </Card>
        </main>
    );
}
