<script setup lang="ts">
import { ref } from "vue";
import { copyToClipboard } from "@/Composables/useClipboard";

const props = defineProps<{
    text: string;
    title?: string;
    size?: string;
}>();

const copied = ref(false);

const handleCopy = async () => {
    await copyToClipboard(props.text);
    copied.value = true;
    setTimeout(() => copied.value = false, 1500);
};
</script>

<template>
    <v-btn
        :title="title"
        :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
        :size="size ?? 'x-small'"
        :variant="copied ? 'tonal' : 'plain'"
        :color="copied ? 'success' : undefined"
        density="compact"
        @click="handleCopy"
    />
</template>
