import React from "react";
import { Meta, StoryFn } from "@storybook/react";

import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";

export default {
    title: "Components/Tabs/TabTitle",
    component: TabTitleOrg,
    argTypes: {},
} as Meta<typeof TabTitleOrg>;

const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
    return (
        <Tabs
            id="titledemo"
            tabs={[
                {
                    id: "titlesimple",
                    title: <TabTitleOrg {...args} />,
                },
            ]}
        />
    );
};

const TemplateFull: StoryFn<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;

export const TabTitleElement = TemplateFull.bind({});
TabTitleElement.args = {
    text: "Tab title",
    titlePrefix: "[",
    titleSuffix: <span>]</span>,
};

export const TabTitleSymbolElement = TemplateFull.bind({});
TabTitleSymbolElement.args = {
    text: "★",
};