import { Checklist } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Checklist> = {
  title: "Components/Checklist",
  component: Checklist,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A checklist component that displays a list of items with icons, typically used for feature lists or task lists.",
      },
    },
  },
  argTypes: {
    items: {
      control: { type: "object" },
      description: "Array of strings to display as checklist items",
    },
    listIconName: {
      control: { type: "select" },
      options: ["check"],
      description: "Icon name to display for each item",
    },
    listItemClassName: {
      control: { type: "text" },
      description: "Additional CSS classes for list items",
    },
  },
  args: {
    items: ["Feature 1", "Feature 2", "Feature 3"],
    listIconName: "check",
  },
};

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

// Default checklist
export const Default: Story = {
  args: {},
};

// With items
export const WithItems: Story = {
  args: {
    items: [
      "High-speed internet connection",
      "24/7 customer support",
      "No data caps",
      "Free installation",
    ],
  },
};

// Custom icon
export const CustomIcon: Story = {
  args: {
    items: ["Item 1", "Item 2", "Item 3"],
    listIconName: "check",
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    items: ["Styled item 1", "Styled item 2", "Styled item 3"],
    listItemClassName: "body1 text-text-brand",
  },
};

// Long list
export const LongList: Story = {
  args: {
    items: [
      "Feature one with a longer description",
      "Feature two",
      "Feature three",
      "Feature four",
      "Feature five",
      "Feature six",
      "Feature seven",
      "Feature eight",
    ],
  },
};

// Single item
export const SingleItem: Story = {
  args: {
    items: ["Single checklist item"],
  },
};

// Empty state (should not render)
export const Empty: Story = {
  args: {
    items: [],
  },
  parameters: {
    docs: {
      description: {
        story: "Checklist with no items (component returns null).",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Default Checklist</h3>
        <Checklist items={["Item 1", "Item 2", "Item 3"]} />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
        <Checklist
          items={["Styled item 1", "Styled item 2"]}
          listItemClassName="body1 font-semibold"
        />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Long List</h3>
        <Checklist
          items={[
            "Feature one",
            "Feature two",
            "Feature three",
            "Feature four",
            "Feature five",
          ]}
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all checklist variants and styling options.",
      },
    },
  },
};