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

const meta = {
  title: "base/communication/Em",
  component: Em,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The emphasized text content",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "This text is emphasized",
  },
} satisfies Meta<typeof Em>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default emphasized text.
 */
export const Default: Story = {}

/**
 * Emphasized text in context.
 */
export const InContext: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <p>
        This is a paragraph with <Em>emphasized text</Em> to show how it looks in context.
      </p>
      <p>
        Another paragraph with <Em>different emphasized content</Em> to demonstrate usage.
      </p>
    </div>
  ),
}

/**
 * Emphasized text in a sentence.
 */
export const InSentence: Story = {
  args: {
    children: "important",
  },
  render: args => (
    <p>
      This is a sentence where the word <Em {...args} /> is emphasized to show its significance.
    </p>
  ),
}

/**
 * Multiple emphasized words.
 */
export const MultipleEmphasis: Story = {
  render: () => (
    <p>
      This paragraph contains <Em>multiple emphasized words</Em> to demonstrate how the component
      works in context. The <Em>blue emphasis</Em> and <Em>red emphasis</Em> show different styling
      options.
    </p>
  ),
}