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

interface Props {
  criteria: PerformanceCriteria;
  showState?: boolean;
}

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

<template>
  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
    <div class="flex flex-row items-center">
      <div v-if="showState" class="h-8 w-8 mr-4">
        <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="pr-5 lg:mr-10 mb-4 lg:mb-0">
        <h4 class="text-bold mb-2">{{ criteria.title }}</h4>
        <p>
          Lerneinheit:
          <a class="link" :href="criteria.learning_unit.frontend_url">
            {{ criteria.learning_unit.title }}
          </a>
        </p>
      </div>
    </div>
    <span class="whitespace-nowrap">
      <a class="link" :href="criteria.learning_unit.frontend_url">
        Sich nochmals einschätzen
      </a>
    </span>
  </div>
</template>

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