import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import { 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>
                            <IconButton icon={'settings'} variant={'filled'} />
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </main>
    );
}