<script setup lang="ts">
import { computed } from "vue";
import type { RouteLocationRaw } from "vue-router";

const props = defineProps<{
  taskTitle: string;
  circleTitle: string;
  pendingTasks: number;
  pendingTasksLabel: string;
  taskLink: RouteLocationRaw;
  taskLinkLabel: string;
  taskLinkPendingLabel: string;
}>();

const linkLabel = computed(() => {
  if (!props.taskLinkPendingLabel) {
    return props.taskLinkLabel;
  }
  return props.pendingTasks > 0 ? props.taskLinkPendingLabel : props.taskLinkLabel;
});

const hasPendingTasks = computed(() => props.pendingTasks > 0);
</script>

<template>
  <div
    class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
  >
    <div
      class="flex flex-grow flex-row flex-wrap items-center justify-start space-y-4 sm:space-y-0"
    >
      <div class="w-80">
        <div class="font-bold">{{ taskTitle }}</div>
        <div class="text-small text-gray-900">
          {{ $t("a.Circle") }} «{{ circleTitle }}»
        </div>
      </div>
      <div
        class="flex flex-grow flex-row items-center justify-start space-x-2 sm:pl-20"
      >
        <template v-if="hasPendingTasks">
          <div
            class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
          >
            <span>{{ pendingTasks }}</span>
          </div>
          <span>{{ pendingTasksLabel }}</span>
        </template>
      </div>
      <router-link
        :class="[hasPendingTasks ? 'btn-primary' : 'underline']"
        :to="taskLink"
      >
        {{ linkLabel }}
      </router-link>
    </div>
  </div>
</template>
