<script setup>
    import { defineAsyncComponent, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { mdiMessageAlertOutline } from '@mdi/js';

    const FeedbackSubmissionDialog = defineAsyncComponent(() => import('./FeedbackSubmissionDialog.vue'));

    const { t } = useI18n();
    const isDialogOpen = ref(false);
</script>

<template>
    <div
        class="feedback-entry"
        data-feedback-ui="true"
    >
        <button
            class="feedback-entry-button"
            type="button"
            :title="t('feedback.open')"
            @click="isDialogOpen = true"
        >
            <v-icon :icon="mdiMessageAlertOutline" />
            <span>{{ t('feedback.button') }}</span>
        </button>

        <FeedbackSubmissionDialog v-model="isDialogOpen" />
    </div>
</template>

<style scoped>
    .feedback-entry {
        @apply fixed bottom-5 right-5 z-50;
    }

    .feedback-entry-button {
        @apply flex h-12 items-center gap-2 rounded-full border px-4 text-sm font-bold shadow-lg transition-colors;
        background: #172033;
        border-color: rgba(255, 255, 255, 0.4);
        color: #fffaf2;
    }

    .feedback-entry-button:hover {
        background: #0f766e;
    }

    .feedback-entry-button span {
        @apply hidden sm:inline;
    }
</style>
