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

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

import {
  TemsBadge,
  type TemsBadgeProps,
} from "@components/shared/ui/tems-badge";

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

    return html`<tems-badge
      type="${args.type}"
      size="${args.size}"
      label="${args.label}"
    ></tems-badge>`;
  },
  args: { type: undefined, size: undefined },
  argTypes: {
    label: {
      control: "text",
      table: {
        defaultValue: { summary: "(empty string)" },
      },
    },
    type: {
      description: "Colours of the badge",
      control: "select",
      table: {
        defaultValue: { summary: "default" },
      },
      options: [
        "success",
        "warning",
        "information",
        "error",
        "brand",
        "disabled",
      ],
    },
    size: {
      description: "Size of the avatar",
      control: {
        type: "select",
        name: "Size",
        labels: {
          md: "Medium",
          sm: "Small",
          lg: "Large",
        },
      },
      table: {
        defaultValue: { summary: "md" },
      },
      options: ["md", "sm", "lg"],
    },
  },
};

export default meta;

export type TemsBadgeStory = StoryObj<TemsBadgeProps>;

export const Default: TemsBadgeStory = {
  args: {
    label: "Badge",
  },
};

export const Small: TemsBadgeStory = {
  args: {
    label: "Badge",
    size: "sm",
  },
};

export const ExtraSmall: TemsBadgeStory = {
  args: {
    label: "Badge",
    size: "xs",
  },
};

export const Brand: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "brand",
  },
};

export const Disabled: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "disabled",
  },
};

export const Errors: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "error",
  },
};

export const Information: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "information",
  },
};

export const Success: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "success",
  },
};

export const Warning: TemsBadgeStory = {
  args: {
    label: "Badge",
    type: "warning",
  },
};