import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import styled from "styled-components";
import { ThemeProvider } from "styled-components";
import T from "../typography";
import genshiroTheme from "../theme/genshiro.theme";
import equilibriumTheme from "../theme/equilibrium.theme";
import Tabs from "./tabs";
const Container = styled.div `
  margin: 20px;
  padding: 20px;
  border: 2px dashed #7b61ff;
  border-radius: 4px;
  width: 100%;
`;
const Row = styled.div `
  display: flex;
  align-items: center;

  .header {
    width: 200px;
    text-align: right;
  }
`;
export default {
    component: Tabs,
    title: "New/Tabs",
};
const TABS = [
    { code: "eeny", label: "Eeny" },
    { code: "meeny", label: "Meeny" },
    { code: "miny", label: "Miny" },
    { code: "moe", label: "Moe" },
];
const TABS_WITH_BADGE = [
    ...TABS.slice(0, 3),
    {
        code: "moe",
        label: (_jsxs(_Fragment, { children: ["Moe", _jsx(Tabs.Badge, { children: "Badge" })] })),
    },
];
const TABS_WITH_SMALL_BADGE = [
    ...TABS.slice(0, 3),
    {
        code: "moe",
        label: (_jsxs(_Fragment, { children: ["Moe", _jsx(Tabs.Badge, { className: "small", children: "Badge" })] })),
    },
];
export const Genshiro = () => {
    const [selected, setSelected] = useState("eeny");
    return (_jsxs(ThemeProvider, { theme: genshiroTheme, children: [_jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, small" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, small: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, badge" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS_WITH_BADGE, selected: selected, handleSelect: setSelected }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, small, badge" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS_WITH_SMALL_BADGE, selected: selected, handleSelect: setSelected, small: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Stroke" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, stroke: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Stroke, small" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, stroke: true, small: true }) })] })] }));
};
export const Equilibrium = () => {
    const [selected, setSelected] = useState("eeny");
    return (_jsxs(ThemeProvider, { theme: equilibriumTheme, children: [_jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, small" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, small: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, badge" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS_WITH_BADGE, selected: selected, handleSelect: setSelected }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard, small, badge" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS_WITH_SMALL_BADGE, selected: selected, handleSelect: setSelected, small: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Stroke" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, stroke: true }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Stroke, small" }), _jsx(Container, { children: _jsx(Tabs, { width: "100%", items: TABS, selected: selected, handleSelect: setSelected, stroke: true, small: true }) })] })] }));
};
//# sourceMappingURL=tabs.stories.js.map