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

interface Props {
  criterion: 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="criterion.completion_status === 'SUCCESS'"
        ></it-icon-smiley-happy>
        <it-icon-smiley-thinking
          v-else-if="criterion.completion_status === 'FAIL'"
        ></it-icon-smiley-thinking>
        <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
      </div>
      <div class="mb-4 pr-4 lg:mb-0 lg:mr-8">
        {{ criterion.title }}
      </div>
    </div>
    <span class="lg:whitespace-nowrap">
      <router-link
        v-if="props.showAssessAgain && criterion.learning_unit?.evaluate_url"
        class="link"
        :to="criterion.learning_unit.evaluate_url"
      >
        {{ $t("competences.assessAgain", { x: criterion.circle.title }) }}
      </router-link>
    </span>
  </div>
</template>

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