import { Meta, StoryObj } from "@storybook/nextjs-vite";
import TextList from "./TextList";
import { TypographyProps } from "@/components/ui/Typography/Typography";

const meta: Meta<typeof TextList> = {
  title: "Widgets/TextList",
  component: TextList,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    items: {
      control: { type: "object" },
      description: "Массив элементов списка с пропсами Typography",
    },
    listStyleType: {
      control: { type: "select" },
      options: ["decimal", "disc", "none"],
      description: "Тип маркера списка",
    },
    markerImage: {
      control: { type: "text" },
      description: "URL изображения для маркера списка",
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

const defaultItems: TypographyProps<"li">[] = [
  {
    children: "Первый элемент списка",
  },
  {
    children: "Второй элемент списка",
  },
  {
    children: "Третий элемент списка",
  },
];

export const Default: Story = {
  args: {
    items: defaultItems,
    listStyleType: "disc",
  },
};

export const Decimal: Story = {
  args: {
    items: defaultItems,
    listStyleType: "decimal",
  },
};

export const Disc: Story = {
  args: {
    items: defaultItems,
    listStyleType: "disc",
  },
};

export const None: Story = {
  args: {
    items: defaultItems,
    listStyleType: "none",
  },
};

export const WithImage: Story = {
  args: {
    items: defaultItems,
    listStyleType: "image",
    markerImage: "/check-mark.svg",
  },
};