<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import type { RepoSummary } from '@/api/types'

defineProps<{ repo: RepoSummary }>()
const auth = useAuthStore()
</script>

<template>
  <router-link
    :to="`/app/${auth.org}/repos/${repo.owner}/${repo.repo}`"
    class="block p-4 border border-border-light dark:border-slate-700 rounded-lg hover:border-accent-500 dark:hover:border-accent-600 transition-colors"
  >
    <div class="flex items-center justify-between mb-1">
      <span class="font-medium text-slate-800 dark:text-slate-200">{{ repo.full_name }}</span>
      <span class="text-xs text-slate-400">{{ repo.spec_count }} spec{{ repo.spec_count !== 1 ? 's' : '' }}</span>
    </div>
    <p v-if="repo.description" class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">{{ repo.description }}</p>
  </router-link>
</template>
