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

const meta = {
  title: "base/communication/Quote",
  component: Quote,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The quoted text content",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "This is a quoted text that represents an important statement or reference.",
  },
} satisfies Meta<typeof Quote>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default quote.
 */
export const Default: Story = {}

/**
 * Quote in context.
 */
export const InContext: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Quote>This is a quote that demonstrates how the component looks in context.</Quote>
      <Quote>Another quote with different content to show variety.</Quote>
    </div>
  ),
}

/**
 * Long quote content.
 */
export const LongContent: Story = {
  args: {
    children:
      "This is a longer quote that demonstrates how the component handles extended content. It should wrap properly and maintain good readability while highlighting the important information contained within the quoted text.",
  },
}

/**
 * Quote with attribution.
 */
export const WithAttribution: Story = {
  render: () => (
    <Quote>
      "The best way to predict the future is to invent it."
      <br />
      <em>— Alan Kay</em>
    </Quote>
  ),
}