import type { Meta, StoryObj } from '@storybook/react'
import { SvgCheck, SvgClipboardAdd } from '@chainlink/blocks-icons'
import { CopyRoot, CopyTrigger } from './CopyPrimitive'

export default {
  title: 'Blocks/Copy/CopyPrimitive',
  component: CopyRoot,
  argTypes: {
    text: {
      control: 'text',
      description: 'The text to copy to the clipboard.',
    },
  },
  args: {
    text: 'Hello, World!',
  },
} satisfies Meta<typeof CopyRoot>

type Story = StoryObj<typeof CopyRoot>

export const Default: Story = {
  render: (args) => (
    <CopyRoot text={args.text}>
      {args.text}
      <CopyTrigger />
    </CopyRoot>
  ),
}

export const WithTruncatedAddress: Story = {
  render: (args) => (
    <CopyRoot text={args.text}>
      0x1234...abcd
      <CopyTrigger />
    </CopyRoot>
  ),
  args: {
    text: '0x123456789abcdef0123456789abcdef01234567',
  },
}

export const CustomIcons: Story = {
  render: (args) => (
    <CopyRoot text={args.text}>
      <CopyTrigger
        className="rounded-md border p-2 hover:bg-background-alt"
        defaultIcon={<SvgClipboardAdd className="size-5 text-foreground" />}
        copiedIcon={<SvgCheck className="size-5 text-success-foreground" />}
      />
    </CopyRoot>
  ),
  args: {
    text: 'Custom icons example',
  },
}

export const StandaloneTrigger: Story = {
  name: 'Standalone CopyTrigger',
  render: (_args) => (
    <div className="flex items-center gap-2">
      <span>Standalone trigger:</span>
      <CopyTrigger text="Copied from standalone trigger!" />
    </div>
  ),
}