import { jsx as _jsx } from "react/jsx-runtime";
import { ChevronRight, User } from "lucide-react";
import { ListItem } from "../ListItem";
const meta = {
    title: "Components/ListItem",
    component: ListItem,
    tags: ["!dev", "!autodocs"],
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { ListItem } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        variant: {
            control: "select",
            options: ["number", "icon", "image"],
            table: { category: "Appearance", defaultValue: { summary: "number" } },
        },
        title: { control: "text", table: { category: "Content" } },
        subtitle: { control: "text", table: { category: "Content" } },
        icon: { control: false, table: { category: "Content" } },
        image: { control: false, table: { category: "Content" } },
        index: { control: "number", table: { category: "Behavior" } },
        listHasSubtitle: { control: "boolean", table: { category: "Behavior" } },
        actionLabel: { control: "text", table: { category: "Content" } },
        actionIcon: { control: false, table: { category: "Content" } },
        onClick: { control: false, table: { category: "Behavior" } },
    },
};
export default meta;
export const Number = {
    args: {
        variant: "number",
        index: 0,
        listHasSubtitle: true,
        title: "Numbered List Item",
        subtitle: "The indicator shows index + 1",
    },
};
export const NumberClickable = {
    args: {
        variant: "number",
        index: 0,
        listHasSubtitle: true,
        title: "Clickable Numbered Item",
        subtitle: "Click me to trigger an action",
        actionLabel: "Start",
        actionIcon: _jsx(ChevronRight, { size: 16 }),
        onClick: () => alert("Clicked!"),
    },
};
export const Icon = {
    args: {
        variant: "icon",
        icon: _jsx(User, { size: 16 }),
        listHasSubtitle: true,
        title: "Icon List Item",
        subtitle: "The indicator shows an icon",
    },
};
export const IconClickable = {
    args: {
        variant: "icon",
        icon: _jsx(User, { size: 16 }),
        listHasSubtitle: true,
        title: "Clickable Icon Item",
        subtitle: "Click me to trigger an action",
        actionLabel: "View",
        actionIcon: _jsx(ChevronRight, { size: 16 }),
        onClick: () => alert("Clicked!"),
    },
};
export const Image = {
    args: {
        variant: "image",
        image: { src: "https://i.pravatar.cc/40", alt: "Avatar" },
        listHasSubtitle: true,
        title: "Image List Item",
        subtitle: "The indicator shows a thumbnail",
    },
};
export const ImageClickable = {
    args: {
        variant: "image",
        image: { src: "https://i.pravatar.cc/40", alt: "Avatar" },
        listHasSubtitle: true,
        title: "Clickable Image Item",
        subtitle: "Click me to trigger an action",
        actionIcon: _jsx(ChevronRight, { size: 16 }),
        onClick: () => alert("Clicked!"),
    },
};
//# sourceMappingURL=ListItem.stories.js.map