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

export default function Switches() {
    return (
        <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
            <h1> Switches </h1>
            <div style={{display: "flex", flexDirection: "column"}}>
                <h2 style={{margin: 0}}> Without icon </h2>
                <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
                    <div>
                        <h2> Default </h2>
                        <Switch/>
                        <Switch defaultChecked/>
                    </div>
                    <div>
                        <h2> Disabled </h2>
                        <Switch disabled/>
                        <Switch disabled defaultChecked/>
                    </div>
                </div>
            </div>
            <div style={{display: "flex", flexDirection: "column"}}>
                <h2 style={{margin: 0}}> With icon (both)</h2>
                <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
                    <div>
                        <h2> Default </h2>
                        <Switch icon/>
                        <Switch defaultChecked icon/>
                    </div>
                    <div>
                        <h2> Disabled </h2>
                        <Switch disabled icon/>
                        <Switch disabled defaultChecked icon/>
                    </div>
                </div>
            </div>
            <div style={{display: "flex", flexDirection: "column"}}>
                <h2 style={{margin: 0}}> With icon (selected)</h2>
                <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
                    <div>
                        <h2> Default </h2>
                        <Switch selected icon/>
                        <Switch selected defaultChecked icon/>
                    </div>
                    <div>
                        <h2> Disabled </h2>
                        <Switch selected disabled icon/>
                        <Switch selected disabled defaultChecked icon/>
                    </div>
                </div>
            </div>
        </div>
    );
}