import {PoweroffOutlined} from "@ant-design/icons";
import {ComponentMeta, ComponentStory} from "@storybook/react";
import {Badge, Col, Row, Space} from "antd";
import React from "react";
import {Button} from "../Starship";
import "../Styles/index.scss";
import "../Styles/color-stories.scss";
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
    title: "Example/Colours",
    component: Badge,
    argTypes: {},
    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Badge>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = args => (
    <>
        {/* primary button only text */}
        <h3 className="h4">Colours</h3>
        <section className="all-used-colors">
            <div className="container">
                <div className="row">
                    <div className="col">
                        <h1>Light</h1>
                        <div className="box">
                            <div className="colored base-0-bg"></div>
                            <b className="var">var: --base-0</b>
                            <span className="code">#FAFAFA</span>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-100</b>
                            <span className="code">#F6F6F6</span>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-200</b>
                            <span className="code">#F2F2F2</span>
                        </div>
                        <div className="box">
                            <div className="colored base-300-bg"></div>
                            <b className="var">var: --base-300</b>
                            <span className="code">#E7E7E7</span>
                        </div>
                        <div className="box">
                            <div className="colored base-400-bg"></div>
                            <b className="var">var: --base-400</b>
                            <span className="code">#CECFD1</span>
                        </div>
                        <div className="box">
                            <div className="colored base-500-bg"></div>
                            <b className="var">var: --base-500</b>
                            <span className="code">#A2A7B0</span>
                        </div>
                        <div className="box">
                            <div className="colored base-600-bg"></div>
                            <b className="var">var: --base-600</b>
                            <span className="code">#7F848E</span>
                        </div>
                        <div className="box">
                            <div className="colored base-700-bg"></div>
                            <b className="var">var: --base-700</b>
                            <span className="code">#5D616C;</span>
                        </div>
                        <div className="box">
                            <div className="colored base-800-bg"></div>
                            <b className="var">var: --base-800</b>
                            <span className="code">#555862</span>
                        </div>
                        <div className="box">
                            <div className="colored base-900-bg"></div>
                            <b className="var">var: --base-900</b>
                            <span className="code">#4C4E58</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1000-bg"></div>
                            <b className="var">var: --base-1000</b>
                            <span className="code">#3B3C44</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1100-bg"></div>
                            <b className="var">var: --base-1100</b>
                            <span className="code">#272B30</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1200-bg"></div>
                            <b className="var">var: --base-1200</b>
                            <span className="code">#212327</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1300-bg"></div>
                            <b className="var">var: --base-1300</b>
                            <span className="code">#181A1E</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1400-bg"></div>
                            <b className="var">var: --base-1400</b>
                            <span className="code">#16181B</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1500-bg"></div>
                            <b className="var">var: --base-1500</b>
                            <span className="code">#131518</span>
                        </div>
                        <div className="box">
                            <div className="colored btn-dark-color-bg"></div>
                            <b className="var">var: --btn-dark-color</b>
                            <span className="code">#272b30</span>
                        </div>
                    </div>
                    <div className="col">
                        <h1>Dark</h1>
                        <div className="box">
                            <div className="colored base-0-bg"></div>
                            <b className="var">var: --base-0</b>
                            <span className="code">#131518</span>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-100</b>
                            <span className="code">#16181B</span>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-200</b>
                            <span className="code">#181A1E</span>
                        </div>
                        <div className="box">
                            <div className="colored base-300-bg"></div>
                            <b className="var">var: --base-300</b>
                            <span className="code">#212327</span>
                        </div>
                        <div className="box">
                            <div className="colored base-400-bg"></div>
                            <b className="var">var: --base-400</b>
                            <span className="code">#272B30</span>
                        </div>
                        <div className="box">
                            <div className="colored base-500-bg"></div>
                            <b className="var">var: --base-500</b>
                            <span className="code">#3B3C44</span>
                        </div>
                        <div className="box">
                            <div className="colored base-600-bg"></div>
                            <b className="var">var: --base-600</b>
                            <span className="code">#4C4E58</span>
                        </div>
                        <div className="box">
                            <div className="colored base-700-bg"></div>
                            <b className="var">var: --base-700</b>
                            <span className="code">#555862</span>
                        </div>
                        <div className="box">
                            <div className="colored base-800-bg"></div>
                            <b className="var">var: --base-800</b>
                            <span className="code">#5D616C</span>
                        </div>
                        <div className="box">
                            <div className="colored base-900-bg"></div>
                            <b className="var">var: --base-900</b>
                            <span className="code">#7F848E</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1000-bg"></div>
                            <b className="var">var: --base-1000</b>
                            <span className="code">#A2A7B0</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1100-bg"></div>
                            <b className="var">var: --base-1100</b>
                            <span className="code">#CECFD1</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1200-bg"></div>
                            <b className="var">var: --base-1200</b>
                            <span className="code">#E7E7E7</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1300-bg"></div>
                            <b className="var">var: --base-1300</b>
                            <span className="code">#F2F2F2</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1400-bg"></div>
                            <b className="var">var: --base-1400</b>
                            <span className="code">#F6F6F6</span>
                        </div>
                        <div className="box">
                            <div className="colored base-1500-bg"></div>
                            <b className="var">var: --base-1500</b>
                            <span className="code">#FAFAFA</span>
                        </div>
                        <div className="box">
                            <div className="colored btn-dark-color-bg"></div>
                            <b className="var">var: --btn-dark-color</b>
                            <span className="code">#cecfd1</span>
                        </div>
                    </div>
                    <div className="col">
                        <h1>Shared</h1>
                        <div className="box">
                            <div className="colored primary-100-bg"></div>
                            <b className="var">var: --primary-100</b>
                            <span className="code">#F7B809</span>
                        </div>

                        <div className="box">
                            <div className="colored primary-200-bg"></div>
                            <b className="var">var: --primary-200 </b>
                            <span className="code">#D09900</span>
                        </div>

                        <div className="box">
                            <div className="colored primary-300-bg"></div>
                            <b className="var">var: --primary-300 </b>
                            <span className="code">#d09900</span>
                        </div>

                        <div className="box">
                            <div className="colored successive-100-bg"></div>
                            <b className="var">var: --successive-100</b>
                            <span className="code">#6BC592</span>
                        </div>
                        <div className="box">
                            <div className="colored successive-200-bg"></div>
                            <b className="var">var: --successive-200</b>
                            <span className="code">#54A577</span>
                        </div>
                        <div className="box">
                            <div className="colored destructive-100-bg"></div>
                            <b className="var">var: --destructive-100</b>
                            <span className="code">#EB5A5A</span>
                        </div>
                        <div className="box">
                            <div className="colored destructive-200-bg"></div>
                            <b className="var">var: --destructive-200</b>
                            <span className="code">#BD3F4D</span>
                        </div>
                        <div className="box">
                            <div className="colored links-bg"></div>
                            <b className="var">var: --links</b>
                            <span className="code">#267CF4</span>
                        </div>
                        <div className="box">
                            <div className="colored neutral-100-bg"></div>
                            <b className="var">var: --neutral-100</b>
                            <span className="code">#E7E7E7</span>
                        </div>
                        <div className="box">
                            <div className="colored neutral-200-bg"></div>
                            <b className="var">var: --neutral-200</b>
                            <span className="code">#181a1e</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {/* primary button only text */}
    </>
);

export const StarshipColours = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
