import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import LIcon from "../lucid-icon/lucid-icon";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "./collapsible";

const meta = {
  title: "UI/Collapsible",
  component: Collapsible,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Collapsible>;

export default meta;

type Story = StoryObj<typeof Collapsible>;

export const DefaultCollapsible: Story = {
  render: () => (
    <Collapsible>
      <CollapsibleTrigger className="flex items-center gap-4 rounded border border-gray-100 p-2">
        Your pretty custom collapse component
        <LIcon name="ChevronsUpDown" size={18} />
      </CollapsibleTrigger>
      <CollapsibleContent>
        This is a collapsible content. You can put anything you want here. It
        will be hidden by default. 🚀🚀🚀🚀
      </CollapsibleContent>
    </Collapsible>
  ),
};