<template>
  <section class="min-h-screen px-5 pt-20 pb-10 lg:px-8">
    <div class="mx-auto w-full max-w-3xl">
      <button
        type="button"
        class="mb-8 text-sm text-dark transition hover:text-dark flex items-center justify-center gap-x-1.5"
        @click="$emit('back')"
      >
        <component :is="icons.arrowLeft" class="w-4 h-4" />
        <span>{{ t("Back") }}</span>
      </button>

      <h1 class="text-4xl font-medium tracking-tight text-dark md:text-center">
        {{ t("Satisfaction Survey") }}
      </h1>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useIcons } from "@/composables/useIcons";

const icons = useIcons();

defineEmits<{
  back: [];
}>();

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