import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';

const cardStyles = { width: '256px', aspectRatio: 1 };

export default function Page() {
    return (
        <main>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '8px',
                }}
            >
                <div style={{ display: 'flex', gap: '8px' }}>
                    <Card style={cardStyles} variant={'filled'}>
                        <CardActionArea>
                            <h1>Header</h1>
                        </CardActionArea>
                        <div>
                            <Button>label</Button>
                        </div>
                    </Card>
                    <Card style={cardStyles} variant={'outlined'} />
                    <Card style={cardStyles} variant={'elevated'} />
                </div>
            </div>
        </main>
    );
}