<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { ref } from '#imports'

const props = defineProps({
  content: {
    type: String,
    default: '',
  },
})

const state = ref('copy')

const { copy: copyToClipboard } = useClipboard()

const copyCode = () => {
  copyToClipboard(props.content)
    .then(() => {
      state.value = 'copied'

      setTimeout(() => {
        state.value = 'copy'
      }, 1500)
    })
    .catch(() => {
      console.warn("Couldn't copy to clipboard!")
    })
}
</script>

<template>
  <button @click="copyCode">
    {{ state }}
  </button>
</template>

<style lang="ts" scoped>
css({
  button: {
    display: "flex",
    cursor: "pointer",
    textTransform: "capitalize",
    backgroundColor: "{colors.gray.700}",
    borderRadius: "{border-radius.md}",
    padding: "{space.xs}",
    color: "{colors.gray.50}",
    "&:hover": { color: "{colors.primary.50}" }
  }
})
</style>
