<template>
  <div class="site-card"
       :class="{ active, disabled }"
       @click="$emit('select')">
    <span class="site-name">{{ site.name }}</span>
    <span v-if="!site.enabled" class="badge disabled">Disabled</span>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  site: { id: string; name: string; enabled: boolean }
  active: boolean
  disabled: boolean
}>()

defineEmits<{ select: [] }>()
</script>

<style scoped>
.site-card {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg-secondary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-card:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.site-card.active {
  border-color: #2563eb;
  background: var(--bg-active);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.site-card.disabled {
  opacity: 0.5;
}

.site-name {
  font-weight: 600;
  color: var(--text-primary);
}

.badge.disabled {
  font-size: 10px;
  color: var(--danger-text);
  background: var(--danger-bg);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
</style>
