<template>
  <div>
    <h1 class="hidden lg:mb-12 lg:block">{{ title }}</h1>
    <div
      class="b-0 flex flex-col lg:flex-row lg:items-center lg:border lg:border-gray-400 lg:p-8"
    >
      <img :src="avatarUrl" class="mb-6 h-16 w-16 rounded-full lg:mr-12" />
      <h1 class="mb-8 block lg:hidden">{{ title }}</h1>
      <div>
        <p class="mb-6">{{ description }}</p>
        <button v-if="!feedbackSent" class="btn-primary" @click="$emit('sendFeedback')">
          {{ $t("feedback.sendFeedback") }}
        </button>
        <p v-else class="flex items-center bg-green-200 px-6 py-4">
          <it-icon-check
            class="mr-2 inline-block h-7 w-7 text-green-800"
          ></it-icon-check>
          {{ $t("feedback.feedbackSent") }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  avatarUrl?: string;
  title?: string;
  description?: string;
  feedbackSent?: boolean;
}

withDefaults(defineProps<Props>(), {
  avatarUrl: "",
  title: "",
  description: "",
  feedbackSent: false,
});

defineEmits(["sendFeedback"]);
</script>
