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

export default function Fabs() {
    return (
        <div className={"m3 m3-wrapper"}>
            <div style={{display:"flex",flexDirection:"row",gap:"2em"}}>
                <div>
                    <h1> FABs with elevation</h1>
                    <div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
                        <div>
                            <h2> Small </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"small"}
                                     icon={"edit"}
                                     elevated
                                     centralRipple/>
                                <FAB variant={"primary"}
                                     size={"small"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"secondary"}
                                     size={"small"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"tertiary"}
                                     size={"small"}
                                     icon={"edit"}
                                     elevated/>
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB icon={"edit"}
                                     elevated/>
                                <FAB variant={"primary"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"secondary"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"tertiary"}
                                     icon={"edit"}
                                     elevated/>
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"large"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"primary"}
                                     size={"large"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"secondary"}
                                     size={"large"}
                                     icon={"edit"}
                                     elevated/>
                                <FAB variant={"tertiary"}
                                     size={"large"}
                                     icon={"edit"}
                                     elevated/>
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"extended"}
                                     icon={"edit"}
                                     elevated>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"primary"}
                                     size={"extended"}
                                     icon={"edit"}
                                     elevated>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"secondary"}
                                     size={"extended"}
                                     icon={"edit"}
                                     elevated>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"tertiary"}
                                     size={"extended"}
                                     icon={"edit"}
                                     elevated>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h1> FABs without elevation</h1>
                    <div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
                        <div>
                            <h2> Small </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"small"}
                                     icon={"edit"}/>
                                <FAB variant={"primary"}
                                     size={"small"}
                                     icon={"edit"}/>
                                <FAB variant={"secondary"}
                                     size={"small"}
                                     icon={"edit"}/>
                                <FAB variant={"tertiary"}
                                     size={"small"}
                                     icon={"edit"}/>
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB icon={"edit"}/>
                                <FAB variant={"primary"} icon={"edit"}/>
                                <FAB variant={"secondary"} icon={"edit"}/>
                                <FAB variant={"tertiary"} icon={"edit"}/>
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"large"}
                                     icon={"edit"}/>
                                <FAB variant={"primary"}
                                     size={"large"}
                                     icon={"edit"}/>
                                <FAB variant={"secondary"}
                                     size={"large"}
                                     icon={"edit"}/>
                                <FAB variant={"tertiary"}
                                     size={"large"}
                                     icon={"edit"}/>
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
                            <div style={{display: "flex", gap: "2em"}}>
                                <FAB size={"extended"}
                                     icon={"edit"}>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"primary"}
                                     size={"extended"}
                                     icon={"edit"}>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"secondary"}
                                     size={"extended"}
                                     icon={"edit"}>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                                <FAB variant={"tertiary"}
                                     size={"extended"}
                                     icon={"edit"}>
                                        <span className={"label-large"}>
                                            Label
                                        </span>
                                </FAB>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}