'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 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
                            centralRipple
                            onClick={callback}
                            variant={'filled'}
                        >
                            Label + {state}
                        </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>
    );
}
