import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as CopyStories from './Copy.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={CopyStories} />

<Title>Copy</Title>
<Subtitle>
  A component that displays content alongside a button to copy a specified text
  value to the clipboard.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={CopyStories.Default} sourceState="shown" />
<Controls />

## Usage

### Import

```tsx
import { Copy } from '@chainlink/blocks'
```

### Example

```tsx
export function MyCopyComponent() {
  return (
    <Copy text="This is the text to be copied">
      This is the displayed content
    </Copy>
  )
}
```

## Variants

The `Copy` component supports a `variant` prop to switch between button and icon styles.

- **`button`** — Default. Uses `CopyButton` with full button styling.
- **`icon`** — Uses `CopyIcon` for a minimal, icon-only appearance.

### Button Variant (Default)

<Canvas of={CopyStories.Default} sourceState="shown" />

### Icon Variant

<Canvas of={CopyStories.IconVariant} sourceState="shown" />

## Standalone Components

`CopyButton` and `CopyIcon` can be used standalone with a `text` prop, no `CopyRoot` wrapper needed.

### Standalone CopyButton

<Canvas of={CopyStories.StandaloneCopyButton} sourceState="shown" />

### Standalone CopyIcon

<Canvas of={CopyStories.StandaloneCopyIcon} sourceState="shown" />

## Examples

### Copying an Address

A common use case is to display a truncated address while allowing the user to copy the full address.

<Canvas of={CopyStories.CopyAddressExample} sourceState="shown" />

### Copying a Code Snippet

The component can also be used to copy multi-line content, such as code snippets.

<Canvas of={CopyStories.CopyCodeSnippetExample} sourceState="shown" />