"use client"

import React from 'react';
import {IconButton} from "../../src/primitive-components/material-you-components";

function IconButtons() {

    return (
        <div className={"m3 m3-wrapper"}>
            <h1> Icon buttons </h1>
            <div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
                <div>
                    <h2> Default buttons </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
                        <IconButton icon={"settings"}/>
                        <IconButton icon={"settings"} variant={"filled"}/>
                        <IconButton icon={"settings"} variant={"tonal"}/>
                        <IconButton icon={"settings"} variant={"outlined"}/>
                    </div>
                    <h2> Disabled default buttons </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
                        <IconButton icon={"settings"} disabled/>
                        <IconButton icon={"settings"} variant={"filled"} disabled/>
                        <IconButton icon={"settings"} variant={"tonal"} disabled/>
                        <IconButton icon={"settings"} variant={"outlined"} disabled/>
                    </div>
                </div>
                <div>
                    <h2> Toggle buttons </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
                        <IconButton icon={"settings"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        }/>
                        <IconButton icon={"settings"} variant={"filled"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        }/>
                        <IconButton icon={"settings"} variant={"tonal"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        }/>
                        <IconButton icon={"settings"} variant={"outlined"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        }/>
                    </div>
                    <h2> Disabled toggle buttons </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
                        <IconButton icon={"settings"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled/>
                        <IconButton icon={"settings"} variant={"filled"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled/>
                        <IconButton icon={"settings"} variant={"tonal"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled/>
                        <IconButton icon={"settings"} variant={"outlined"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled/>
                    </div>
                    <h2> Disabled selected toggle buttons </h2>
                    <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
                        <IconButton icon={"settings"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled selected/>
                        <IconButton icon={"settings"} variant={"filled"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled selected/>
                        <IconButton icon={"settings"} variant={"tonal"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled selected/>
                        <IconButton icon={"settings"} variant={"outlined"} toggled={
                            {
                                selected: "settings",
                                unselected: "settings",
                            }
                        } disabled selected/>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default IconButtons;