import { Meta } from "@storybook/nextjs-vite";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./accordion";

/** Reusable Accordion Component */
const meta: Meta<typeof Accordion> = {
  title: "Shadcn UI/Accordion",
  component: Accordion,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    type: "single",
    collapsible: true,
  } satisfies React.ComponentProps<typeof Accordion>,
  argTypes: {
    type: {
      control: { type: "select" },
      options: ["single", "multiple"],
    },
    collapsible: {
      control: { type: "boolean" },
    },
  },
  render: (args) => (
    <Accordion {...args} className="w-[400px]">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other
          components&apos; aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It&apos;s animated by default, but you can disable it if you
          prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  ),
};

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

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

// export const Multiple = {
//   args: {
//     type: "multiple",
//   },
//   render: (args) => (
//     <Accordion {...args} className="w-[400px]">
//       <AccordionItem value="item-1">
//         <AccordionTrigger>Is it accessible?</AccordionTrigger>
//         <AccordionContent>
//           Yes. It adheres to the WAI-ARIA design pattern.
//         </AccordionContent>
//       </AccordionItem>
//       <AccordionItem value="item-2">
//         <AccordionTrigger>Is it styled?</AccordionTrigger>
//         <AccordionContent>
//           Yes. It comes with default styles that matches the other
//           components&apos; aesthetic.
//         </AccordionContent>
//       </AccordionItem>
//       <AccordionItem value="item-3">
//         <AccordionTrigger>Is it animated?</AccordionTrigger>
//         <AccordionContent>
//           Yes. It&apos;s animated by default, but you can disable it if you
//           prefer.
//         </AccordionContent>
//       </AccordionItem>
//     </Accordion>
//   ),
// } satisfies Story;

// export const SingleItem = {
//   render: (args) => (
//     <Accordion {...args} className="w-[400px]">
//       <AccordionItem value="item-1">
//         <AccordionTrigger>What is this component?</AccordionTrigger>
//         <AccordionContent>
//           This is an accordion component built with Radix UI primitives. It
//           provides a collapsible content area that can be expanded or collapsed
//           by clicking the trigger.
//         </AccordionContent>
//       </AccordionItem>
//     </Accordion>
//   ),
// } satisfies Story;

// export const LongContent = {
//   render: (args) => (
//     <Accordion {...args} className="w-[400px]">
//       <AccordionItem value="item-1">
//         <AccordionTrigger>What are the features?</AccordionTrigger>
//         <AccordionContent>
//           <div className="space-y-2">
//             <p>This accordion component includes:</p>
//             <ul className="list-disc list-inside space-y-1 ml-4">
//               <li>Accessibility support with WAI-ARIA patterns</li>
//               <li>Smooth animations for opening and closing</li>
//               <li>Keyboard navigation support</li>
//               <li>Customizable styling with Tailwind CSS</li>
//               <li>Single or multiple item selection modes</li>
//               <li>Collapsible functionality</li>
//             </ul>
//             <p className="mt-2">
//               The component is built using Radix UI primitives, ensuring
//               excellent accessibility and user experience across different
//               devices and assistive technologies.
//             </p>
//           </div>
//         </AccordionContent>
//       </AccordionItem>
//     </Accordion>
//   ),
// } satisfies Story;

// export const CustomStyling = {
//   render: (args) => (
//     <Accordion {...args} className="w-[400px]">
//       <AccordionItem
//         value="item-1"
//         className="border-2 border-blue-200 rounded-lg mb-2"
//       >
//         <AccordionTrigger className="text-blue-600 font-semibold hover:text-blue-800">
//           Custom Styled Item
//         </AccordionTrigger>
//         <AccordionContent className="text-blue-700 bg-blue-50 p-4 rounded-b-lg">
//           This accordion item has custom styling with blue colors and enhanced
//           spacing.
//         </AccordionContent>
//       </AccordionItem>
//       <AccordionItem
//         value="item-2"
//         className="border-2 border-green-200 rounded-lg"
//       >
//         <AccordionTrigger className="text-green-600 font-semibold hover:text-green-800">
//           Another Custom Item
//         </AccordionTrigger>
//         <AccordionContent className="text-green-700 bg-green-50 p-4 rounded-b-lg">
//           Each item can have its own custom styling while maintaining the
//           accordion functionality.
//         </AccordionContent>
//       </AccordionItem>
//     </Accordion>
//   ),
// } satisfies Story;
