<script setup lang="ts">
const isClicked = ref(false)
const copyToClipBoard = () => {
  navigator.clipboard
    .writeText('curl -sL get.pegaz.dev | sudo bash')
    .then(() => {
      isClicked.value = true
      setTimeout(() => {
        isClicked.value = false
      }, 600)
    })
}
</script>

<template>
  <section class="py-4 sm:flex justify-center items-center">
    <a
      href="https://github.com/valerebron/pegaz"
      target="_blank"
      class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all"
    >
      get started
    </a>
    <div
      class="font-mono bg-neutral-900 text-neutral-50 rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative"
    >
      <span class="select-all"> curl -L get.pegaz.dev | sudo bash </span>
      <SvgClipboard
        class="ml-3 cursor-pointer"
        :class="{ 'animate-ping': isClicked }"
        @click="copyToClipBoard"
      />
    </div>
  </section>
</template>
