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

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

import {
  TemsDivision,
  type TemsDivisionProps,
} from "@components/shared/ui/tems-division";

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

    return html`<tems-division type="${args.type}"
      >${args.label}</tems-division
    >`;
  },
  args: {
    type: "h1",
    label:
      "Lorem ipsum dolor sit amet consectetur. Amet facilisis viverra et urna pulvinar neque placerat ullamcorper interdum. Diam diam sit dolor iaculis et libero purus. Sapien arcu semper et lectus urna. Sed urna sollicitudin purus semper faucibus.",
  },
  argTypes: {
    label: {
      description: "Label of division",
      control: "text",
      table: {
        defaultValue: { summary: "(empty string)" },
      },
    },
    type: {
      description: "Type of division",
      control: "select",
      table: {
        defaultValue: { summary: "body-m" },
      },
      options: [
        "h1",
        "h2",
        "h3",
        "h4",
        "display-1",
        "display-2",
        "display-3",
        "display-4",
        "body-sm",
        "body-m",
        "body-l",
      ],
    },
  },
};

export default meta;

export type TemsDivisionStory = StoryObj<TemsDivisionProps>;

export const h1: TemsDivisionStory = {
  args: { type: "h1" },
};

export const h2: TemsDivisionStory = {
  args: { type: "h2" },
};

export const h3: TemsDivisionStory = {
  args: { type: "h3" },
};

export const h4: TemsDivisionStory = {
  args: { type: "h4" },
};

export const display1: TemsDivisionStory = {
  args: { type: "display-1" },
};

export const display2: TemsDivisionStory = {
  args: { type: "display-2" },
};

export const display3: TemsDivisionStory = {
  args: { type: "display-3" },
};

export const display4: TemsDivisionStory = {
  args: { type: "display-4" },
};

export const bodySM: TemsDivisionStory = {
  args: { type: "body-sm" },
};

export const bodyM: TemsDivisionStory = {
  args: { type: "body-m" },
};

export const bodyL: TemsDivisionStory = {
  args: { type: "body-l" },
};