import { ActionIcon, ActionIconProps, Tooltip } from '@tidbcloud/uikit'
import { useClipboard } from '@tidbcloud/uikit/hooks'
import { IconCheck, IconCopy03, IconProps } from '@tidbcloud/uikit/icons'

interface CopyActionIconProps {
  text: string
  disabled?: boolean
  actionIconProps?: Omit<ActionIconProps, 'disabled' | 'onClick'>
  iconProps?: IconProps
  [k: `data-${string}`]: string
}

export const CopyActionIcon = ({ text, disabled, actionIconProps, iconProps, ...dataProps }: CopyActionIconProps) => {
  const clipboard = useClipboard({ timeout: 1000 })
  const copy = () => clipboard.copy(text)

  return (
    <Tooltip label={clipboard.copied ? 'Copied' : 'Copy'} withArrow position="right">
      <ActionIcon
        variant="default"
        size={40}
        {...actionIconProps}
        disabled={disabled ?? !text}
        onClick={copy}
        {...dataProps}
      >
        {clipboard.copied ? <IconCheck size={16} {...iconProps} /> : <IconCopy03 size={16} {...iconProps} />}
      </ActionIcon>
    </Tooltip>
  )
}