'use client';

import React, { useCallback, useState } from 'react';
import { Button } from '../../src/primitive-components/components';

export default function Buttons() {
    const [state, setState] = useState(1);

    const callback = useCallback(
        () => setState(prevState => prevState + 1),
        [state],
    );

    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <h1> Buttons </h1>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    gap: '2em',
                    width: '100%',
                    height: '100%',
                }}
            >
                <div>
                    <h2> Default buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            width: '150px',
                            gap: '0.5em',
                        }}
                    >
                        <Button
                            centralRipple
                            onClick={callback}
                            variant={'filled'}
                        >
                            Label
                        </Button>
                        <Button variant={'outlined'}>Label</Button>
                        <Button variant={'tonal'}>Label</Button>
                        <Button variant={'elevated'}>Label</Button>
                        <Button variant={'text'}>Label</Button>
                    </div>
                </div>
                <div>
                    <h2> Buttons with icon </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            width: '150px',
                            gap: '0.5em',
                        }}
                    >
                        <Button icon={'add'} variant={'filled'}>
                            Label
                        </Button>
                        <Button icon={'add'} variant={'outlined'}>
                            Label
                        </Button>
                        <Button icon={'add'} variant={'tonal'}>
                            Label
                        </Button>
                        <Button icon={'add'} variant={'elevated'}>
                            Label
                        </Button>
                        <Button icon={'add'} variant={'text'}>
                            Label
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}