import ListItem from "../../app/components/layout/ListItem";
import { ICON_NAME_OPTIONS } from "../../app/components/asset/icon";

export default {
  title: "Components/Layout/ListItem",
  component: ListItem,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Icon + label menuitem row used in Popover export menus and CreateFlowTopNav action menus. Distinct from List / ListEntry data rows.",
      },
    },
  },
  argTypes: {
    label: { control: { type: "text" } },
    leadingIcon: {
      control: { type: "select" },
      options: [...ICON_NAME_OPTIONS],
    },
    showDivider: { control: { type: "boolean" } },
    variant: {
      control: { type: "select" },
      options: ["default", "destructive"],
    },
    onClick: { action: "clicked" },
  },
  decorators: [
    (Story) => (
      <div className="w-[240px] bg-[var(--color-surface-default-primary)]">
        <Story />
      </div>
    ),
  ],
};

export const Default = {
  args: {
    label: "PDF",
    leadingIcon: "picture_as_pdf",
    showDivider: true,
  },
};

export const ExportMenu = {
  render: (args) => (
    <div>
      <ListItem
        {...args}
        label="PDF"
        leadingIcon="picture_as_pdf"
        showDivider
      />
      <ListItem {...args} label="CSV" leadingIcon="csv" showDivider />
      <ListItem
        {...args}
        label="Markdown"
        leadingIcon="markdown_copy"
        showDivider={false}
      />
    </div>
  ),
};

export const Destructive = {
  args: {
    label: "Log out",
    leadingIcon: "log_out",
    showDivider: false,
    variant: "destructive",
  },
};