<template>
  <div>
    <h2 class="hidden lg:mb-12 lg:block">{{ title }}</h2>
    <div
      class="b-0 flex flex-col lg:flex-row lg:items-center lg:border lg:border-gray-400 lg:p-8"
    >
      <img
        v-if="showAvatar"
        :src="avatarUrl"
        class="mb-6 h-16 w-16 rounded-full lg:mr-12"
      />
      <h2 class="mb-8 block lg:hidden">{{ title }}</h2>
      <div>
        <p class="mb-6">{{ description }}</p>
        <button
          v-if="!feedbackSent"
          class="btn-primary"
          data-cy="sendFeedbackButton"
          @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;
  showAvatar?: boolean;
}

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

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