<script setup lang="ts">
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import type { Circle } from "@/services/circle";

const props = defineProps<{
  circle: Circle | undefined;
  show: boolean;
}>();

// const emits = defineEmits(['closemodal'])
</script>

<template>
  <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
    <div v-if="circle" class="container-medium">
      <h1 class="">Überblick: Circle «{{ circle.title }}»</h1>

      <p class="mt-8 text-large">
        Hier zeigen wir dir, was du in diesem Circle lernen wirst.
      </p>

      <div v-show="circle.goals.length" class="mt-8 p-4 border">
        <h3>{{ circle.goal_description }}</h3>

        <ul class="mt-4">
          <li
            v-for="goal in circle.goals"
            :key="goal.id"
            class="text-large flex items-center"
          >
            <it-icon-check
              class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"
            ></it-icon-check>
            <div class="mt-4">{{ goal.value }}</div>
          </li>
        </ul>
      </div>

      <div v-show="circle.job_situations.length">
        <h3 class="mt-16">
          {{ circle.job_situation_description }}
        </h3>

        <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
          <li
            v-for="jobSituation in circle.job_situations"
            :key="jobSituation.id"
            class="job-situation border p-4 text-large flex items-center"
          >
            {{ jobSituation.value }}
          </li>
        </ul>
      </div>
    </div>
  </ItFullScreenModal>
</template>

<style scoped></style>
