"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={"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 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>
    );
}