<script setup lang="ts">
import { RouterLink } from 'vue-router'

import Card from '../ui/Card.vue'

defineProps<{
  activities: Array<{ label: string; age: string }>
  canViewAuditLog: boolean
}>()
</script>

<template>
  <Card class="p-7">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.26em] text-violet-500">Aktivitäten</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Was gerade passiert ist</h2>
      </div>
      <RouterLink v-if="canViewAuditLog" to="/admin/users-logs" class="inline-flex h-10 items-center justify-center rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-violet-700 transition hover:bg-violet-50">
        Alles ansehen
      </RouterLink>
    </div>

    <p class="mt-2 text-sm text-slate-500">Globale Admin-Ereignisse, komprimiert für den schnellen Blick.</p>

    <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      <div
        v-for="activity in activities"
        :key="activity.label"
        class="rounded-[24px] border border-violet-100 bg-violet-50/60 px-5 py-5"
      >
        <p class="font-semibold text-slate-800">{{ activity.label }}</p>
        <p class="mt-2 text-sm text-slate-500">{{ activity.age }}</p>
      </div>
      <p v-if="activities.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Noch keine aktuellen Audit-Aktivitäten vorhanden.
      </p>
    </div>
  </Card>
</template>
