'use client';

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

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

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

    return (
        <div className={'m3 m3-wrapper'}>
            <h1> Buttons </h1>
            <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
                <div>
                    <h2> Default buttons </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            width: '150px',
                            gap: '0.5em',
                        }}
                    >
                        <Button
                            variant={'filled'}
                            onClick={callback}
                            centralRipple
                        >
                            Label + {state}
                        </Button>
                        <Button variant={'elevated'} />
                        <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 variant={'filled'} icon={'add'}>
                            Label
                        </Button>
                        <Button variant={'outlined'} icon={'add'}>
                            Label
                        </Button>
                        <Button variant={'tonal'} icon={'add'}>
                            Label
                        </Button>
                        <Button variant={'elevated'} icon={'add'}>
                            Label
                        </Button>
                        <Button variant={'text'} icon={'add'}>
                            Label
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}