import { Meta, StoryObj } from "@storybook/react";
import { Markdown } from "."; // Adjust the import path based on your project structure

// Define the props type
type MarkdownProps = {
  markdownContent: string;
  className?: string;
};

const meta: Meta<typeof Markdown> = {
  title: "Components/Markdown",
  component: Markdown,
  argTypes: {
    markdownContent: {
      control: "text",
      description: "The markdown content to render",
    },
    className: {
      control: "text",
      description: "Optional CSS class for the Prose container",
    },
  },
};

export default meta;

type Story = StoryObj<typeof Markdown>;

// Sample markdown content for different scenarios
const basicMarkdown = `
# Hello World
This is a simple markdown text with **bold** and *italic* content.
`;

const complexMarkdown = `
# My Markdown Demo

## Features
- Bullet points
- With multiple items
- [Link to Google](https://google.com)

### Code Example
\`\`\`javascript
function greet(name) {
  return \`Hello \${name}!\`;
}
console.log(greet('World'));
\`\`\`

| Table | Header |
|-------|--------|
| Row 1 | Data 1 |
| Row 2 | Data 2 |
`;

export const Basic: Story = {
  args: {
    markdownContent: basicMarkdown,
  },
};

export const Complex: Story = {
  args: {
    markdownContent: complexMarkdown,
  },
};

export const WithCustomClass: Story = {
  args: {
    markdownContent: basicMarkdown,
    className: "custom-markdown-class",
  },
};

export const Empty: Story = {
  args: {
    markdownContent: "",
  },
};