// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=760-16696&m=dev
import { html, nothing } from "lit";

import type { Meta, StoryObj } from "@storybook/web-components";

import {
  TemsTabItem,
  type TemsTabItemProps,
} from "@components/shared/ui/tems-tab-item";

const meta: Meta<TemsTabItemProps> = {
  title: "components/shared/ui/tems-tab-item",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsTabItem();

    return html`<tems-tab-item
      label="${args.label}"
      count="${args.count || nothing}"
      active="${args.active || nothing}"
      disabled="${args.disabled || nothing}"
    ></tems-tab-item>`;
  },
  args: {
    label: "Label",
    count: undefined,
    active: undefined,
    disabled: undefined,
  },
  argTypes: {
    label: { control: "text" },
    count: { control: "number" },
    active: { control: "boolean" },
    disabled: { control: "boolean" },
  },
};

export default meta;

export type TemsTabItemStory = StoryObj<TemsTabItemProps>;

export const Default: TemsTabItemStory = {};

export const WithCounter: TemsTabItemStory = {
  args: {
    count: 5000,
  },
};

export const Active: TemsTabItemStory = {
  args: {
    active: true,
  },
};

export const Disabled: TemsTabItemStory = {
  args: {
    disabled: true,
  },
};

export const ActiveDisabled: TemsTabItemStory = {
  args: {
    active: true,
    disabled: true,
  },
};