<script setup lang="ts">



interface Props {
  description: string
  unit: string
  unitUrl: string
  unitId: number
  state: string  // maybe enum
  showState: boolean
}

const props = withDefaults(defineProps<Props>(), {
  description: '',
  unit: '',
  unitUrl: '',
  unitId: -1,
  state: 'open',
  showState: false
})

</script>

<template>
  <div class="flex flex-row items-center justify-between">
    <div v-if="showState">
      <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
      <it-icon-smiley-thinking v-if="state === 'notDone'"></it-icon-smiley-thinking>
      <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
    </div>
    <div class="pr-5 mr-10">
      <h4 class="text-bold mb-2">{{description}}</h4>
      <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
    </div>
    <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
  </div>
</template>

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