import { rem, Tooltip } from '@mantine/core'
import { useClipboard } from '@mantine/hooks'
import { IconCheck, IconCopy } from '@tabler/icons-react'

export function ButtonCopy({
  value,
  width = 20,
  height = 20,
}: {
  value: string
  width?: number
  height?: number
}) {
  const clipboard = useClipboard()
  return (
    <Tooltip
      label="Link copied!"
      offset={5}
      position="bottom"
      radius="xl"
      transitionProps={{ duration: 100, transition: 'slide-down' }}
      opened={clipboard.copied}
    >
      {clipboard.copied ? (
        <IconCheck
          style={{ width: rem(width), height: rem(height) }}
          stroke={1.5}
        />
      ) : (
        <IconCopy
          onClick={() => clipboard.copy(value)}
          style={{
            width: rem(width),
            height: rem(height),
            color: 'skyblue',
            cursor: 'pointer',
          }}
          stroke={1.5}
        />
      )}
    </Tooltip>
  )
}
