import { Canvas, Meta, Title, Subtitle } from '@storybook/addon-docs/blocks'
import * as UseClipboardCopyStories from './useClipboardCopy.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={UseClipboardCopyStories} />

<Title>useClipboardCopy</Title>
<Subtitle>
  A hook for copying text to the clipboard with automatic reset state.
</Subtitle>
<LifecycleTag variant="Stable" />

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

## Overview

`useClipboardCopy` provides a simple way to copy text to the user's clipboard with a built-in `isCopied` state that automatically resets after 1 second.

> **When to use**: Use this hook when you need custom copy functionality beyond what the `Copy` component provides, or when building your own copy UI from scratch.

## Import

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

## Usage

```tsx
const { isCopied, copy } = useClipboardCopy()

<Button onClick={() => copy('Text to copy')}>
  {isCopied ? 'Copied!' : 'Copy'}
</Button>
```

## API

### Returns

| Property   | Type                              | Description                               |
| ---------- | --------------------------------- | ----------------------------------------- |
| `isCopied` | `boolean`                         | True for 1 second after a successful copy |
| `copy`     | `(text: string) => Promise<void>` | Function to copy text to clipboard        |

## Examples

### Copy Code Block

<Canvas of={UseClipboardCopyStories.CopyCode} sourceState="shown" />