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

const props = defineProps<{
    link: string;
}>();

const value = computed(() => props.link.replace('https://', '').replace('http://', ''));

const { copy, copied } = useClipboard({ source: value });
</script>

<template>
    <div class="input-group my-2">
        <input ref="linkInput" class="form-control" readonly :value>
        <button
            type="button"
            :class="['btn', copied ? 'btn-success' : 'btn-outline-secondary']"
            :aria-label="$t('crud.copy')"
            :title="$t('crud.copy')"
            @click="copy()"
        >
            <Icon :v="copied ? 'clipboard-check' : 'clipboard'" />
        </button>
        <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
            <Icon v="external-link" />
        </a>
    </div>
</template>
