import { blockquotePropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { Blockquote } from "./Blockquote"

const meta = {
  title: "base/communication/Blockquote",
  component: Blockquote,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The content of the blockquote",
    },
    size: {
      control: "select",
      options: blockquotePropDefs.size.values,
      description: "The size of the blockquote",
    },
    color: {
      control: "select",
      options: blockquotePropDefs.color.values,
      description: "The color theme of the blockquote",
    },
    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "This is a blockquote with some important text that needs to be highlighted.",
  },
} satisfies Meta<typeof Blockquote>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default blockquote with soft variant.
 */
export const Default: Story = {}

/**
 * Blockquote with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Blockquote size="1">
        Small blockquote with important information that needs to be highlighted.
      </Blockquote>
      <Blockquote size="2">
        Medium blockquote with important information that needs to be highlighted.
      </Blockquote>
      <Blockquote size="3">
        Large blockquote with important information that needs to be highlighted.
      </Blockquote>
    </div>
  ),
}

/**
 * Blockquote with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Blockquote color="gray">Gray blockquote with important information.</Blockquote>
      <Blockquote color="blue">Blue blockquote with important information.</Blockquote>
      <Blockquote color="green">Green blockquote with important information.</Blockquote>
      <Blockquote color="red">Red blockquote with important information.</Blockquote>
      <Blockquote color="yellow">Yellow blockquote with important information.</Blockquote>
      <Blockquote color="purple">Purple blockquote with important information.</Blockquote>
    </div>
  ),
}

/**
 * Blockquote with high contrast.
 */
export const HighContrast: Story = {
  args: {
    highContrast: true,
    children: "This blockquote uses high contrast colors for better visibility.",
  },
}

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