<script setup lang="ts">
const props = defineProps<{
  title: string
  price: number
}>()

const copied = ref(false)

async function share() {
  const url = window.location.href
  const text = `${props.title} - ${props.price.toFixed(0)}€`

  if (navigator.share) {
    await navigator.share({ title: text, url })
  } else {
    await navigator.clipboard.writeText(`${text}\n${url}`)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
  }
}
</script>

<template>
  <UButton
    :label="copied ? 'Copiado!' : 'Compartir'"
    :icon="copied ? 'i-lucide-check' : 'i-lucide-share-2'"
    :color="copied ? 'success' : 'neutral'"
    variant="outline"
    @click="share"
  />
</template>
