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

defineProps<{ repos: EditorRepo[] }>()
const auth = useAuthStore()
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-bold font-display text-slate-800 dark:text-slate-100">Editor</h1>
    </div>

    <div v-if="repos.length === 0" class="text-center py-16">
      <p class="text-slate-500">No repositories found. Make sure your GitHub account has access to repos in this organization.</p>
    </div>

    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div
        v-for="repo in repos"
        :key="repo.full_name"
        class="p-4 border border-border-light dark:border-slate-700 rounded-lg"
      >
        <div class="flex items-center justify-between mb-2">
          <span class="font-medium text-slate-800 dark:text-slate-200">{{ repo.name }}</span>
        </div>
        <p v-if="repo.description" class="text-xs text-slate-500 mb-3 line-clamp-2">{{ repo.description }}</p>
        <router-link
          :to="`/app/${auth.org}/editor/${repo.owner.login}/${repo.name}/new`"
          class="text-xs text-accent-500 hover:text-accent-400"
        >
          + New Spec
        </router-link>
      </div>
    </div>
  </div>
</template>
