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

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

export default meta

type Story = StoryObj<typeof meta>

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

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

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

/**
 * Multiple strong words.
 */
export const MultipleStrong: Story = {
  render: () => (
    <p>
      This paragraph contains <Strong>multiple strong words</Strong> to demonstrate how the
      component works in context. The <Strong>first strong word</Strong> and{" "}
      <Strong>second strong word</Strong> show different styling options.
    </p>
  ),
}

/**
 * Strong text with other elements.
 */
export const WithOtherElements: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <p>
        This paragraph has <Strong>strong text</Strong> mixed with <em>emphasized text</em>.
      </p>
      <p>
        Here we have <Strong>strong text</Strong> and <code>code text</code> together.
      </p>
    </div>
  ),
}