import React from 'react';
import { Tabs, Tab, TabPanel } from './react';
export default {
    title: 'Components/Tabs',
    component: Tabs,
};
export const Default = () => (React.createElement(React.Fragment, null,
    React.createElement(Tabs, { active: "tab1" },
        React.createElement(Tab, { name: "tab1", label: "First Tab" }),
        React.createElement(Tab, { name: "tab2", label: "Second Tab" }),
        React.createElement(Tab, { name: "tab3", label: "Third Tab" })),
    React.createElement(TabPanel, { name: "tab1" },
        React.createElement("p", null, "Content for the first tab. This panel is visible when the first tab is active.")),
    React.createElement(TabPanel, { name: "tab2", hidden: true },
        React.createElement("p", null, "Content for the second tab. This panel is visible when the second tab is active.")),
    React.createElement(TabPanel, { name: "tab3", hidden: true },
        React.createElement("p", null, "Content for the third tab. This panel is visible when the third tab is active."))));
export const WithIcons = () => (React.createElement(React.Fragment, null,
    React.createElement(Tabs, { active: "home" },
        React.createElement(Tab, { name: "home", label: "Home" },
            React.createElement("span", { slot: "icon" }, "\uD83C\uDFE0")),
        React.createElement(Tab, { name: "search", label: "Search" },
            React.createElement("span", { slot: "icon" }, "\uD83D\uDD0D")),
        React.createElement(Tab, { name: "profile", label: "Profile" },
            React.createElement("span", { slot: "icon" }, "\uD83D\uDC64"))),
    React.createElement(TabPanel, { name: "home" },
        React.createElement("p", null, "Welcome to the home page!")),
    React.createElement(TabPanel, { name: "search", hidden: true },
        React.createElement("p", null, "Search functionality goes here.")),
    React.createElement(TabPanel, { name: "profile", hidden: true },
        React.createElement("p", null, "User profile information."))));
export const ManyTabs = () => (React.createElement(React.Fragment, null,
    React.createElement(Tabs, { active: "tab1" },
        React.createElement(Tab, { name: "tab1", label: "Tab 1" }),
        React.createElement(Tab, { name: "tab2", label: "Tab 2" }),
        React.createElement(Tab, { name: "tab3", label: "Tab 3" }),
        React.createElement(Tab, { name: "tab4", label: "Tab 4" }),
        React.createElement(Tab, { name: "tab5", label: "Tab 5" }),
        React.createElement(Tab, { name: "tab6", label: "Tab 6" })),
    React.createElement(TabPanel, { name: "tab1" },
        React.createElement("p", null, "Content for tab 1")),
    React.createElement(TabPanel, { name: "tab2", hidden: true },
        React.createElement("p", null, "Content for tab 2")),
    React.createElement(TabPanel, { name: "tab3", hidden: true },
        React.createElement("p", null, "Content for tab 3")),
    React.createElement(TabPanel, { name: "tab4", hidden: true },
        React.createElement("p", null, "Content for tab 4")),
    React.createElement(TabPanel, { name: "tab5", hidden: true },
        React.createElement("p", null, "Content for tab 5")),
    React.createElement(TabPanel, { name: "tab6", hidden: true },
        React.createElement("p", null, "Content for tab 6"))));
