import type { Meta, StoryObj } from '@storybook/react'
import { Button, Typography } from '../../components'
import { useClipboardCopy } from '.'

const meta: Meta = {
  title: 'Hooks/useClipboardCopy',
}

export default meta

export const Default: StoryObj = {
  render: function CopyDemo() {
    const { isCopied, copy } = useClipboardCopy()
    const textToCopy = 'Hello, this text was copied!'

    return (
      <div className="flex flex-col gap-4 p-8">
        <Typography variant="h3">useClipboardCopy Demo</Typography>
        <Typography variant="body-s" className="text-muted-foreground">
          Click the button to copy text to your clipboard. The button state will
          change for 1 second after copying.
        </Typography>

        <div className="flex items-center gap-4">
          <code className="rounded bg-muted px-3 py-2 font-mono text-sm">
            {textToCopy}
          </code>
          <Button
            variant={isCopied ? 'primary' : 'secondary'}
            size="sm"
            onClick={() => copy(textToCopy)}
          >
            {isCopied ? '✓ Copied!' : 'Copy'}
          </Button>
        </div>
      </div>
    )
  },
}

export const CopyCode: StoryObj = {
  render: function CopyCodeExample() {
    const { isCopied, copy } = useClipboardCopy()

    return (
      <div className="flex flex-col gap-4 p-8">
        <Typography variant="h3">Copy Code Example</Typography>

        <div className="relative">
          <pre className="rounded-lg bg-gray-900 p-4 font-mono text-sm text-gray-100">
            {`const greeting = "Hello World"
console.log(greeting)`}
          </pre>
          <Button
            variant="ghost"
            size="xs"
            className="absolute right-2 top-2"
            onClick={() =>
              copy(`const greeting = "Hello World"\nconsole.log(greeting)`)
            }
          >
            {isCopied ? '✓ Copied' : 'Copy'}
          </Button>
        </div>
      </div>
    )
  },
}