<script setup lang="ts">
import type { PerformanceCriteria } from "@/types";

interface Props {
  criteria: PerformanceCriteria;
  courseSlug: string;
  showState?: boolean;
  showAssessAgain?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showState: false,
  showAssessAgain: true,
});
</script>

<template>
  <div class="flex flex-col justify-between lg:flex-row lg:items-center">
    <div class="flex flex-row items-center">
      <div v-if="showState" class="mr-4 h-8 w-8">
        <it-icon-smiley-happy
          v-if="criteria.completion_status === 'success'"
        ></it-icon-smiley-happy>
        <it-icon-smiley-thinking
          v-else-if="criteria.completion_status === 'fail'"
        ></it-icon-smiley-thinking>
        <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
      </div>
      <div class="mb-4 pr-5 lg:mb-0 lg:mr-10">
        <h4 class="text-bold mb-2">
          {{ criteria.competence_id }} {{ criteria.title }}
        </h4>
        <p class="hidden lg:block">
          {{ $t("general.learningUnit") }}:
          <router-link class="link" :to="criteria.learning_unit.frontend_url">
            {{ criteria.learning_unit.title }}
          </router-link>
        </p>
      </div>
    </div>
    <p class="mb-2 lg:hidden">
      {{ $t("general.learningUnit") }}:
      <router-link class="link" :to="criteria.learning_unit.frontend_url">
        {{ criteria.learning_unit.title }}
      </router-link>
    </p>
    <span class="whitespace-nowrap">
      <router-link
        v-if="props.showAssessAgain"
        class="link"
        :to="`/course/${props.courseSlug}/competence/criteria/${criteria.slug}`"
      >
        {{ $t("competences.assessAgain") }}
      </router-link>
    </span>
  </div>
</template>

<style lang="scss" scoped></style>
