<template>
  <div
    class="cursor-pointer rounded-lg border bg-white p-5 transition-shadow hover:shadow-md"
    @click="$emit('click')"
  >
    <div class="flex items-start justify-between mb-3">
      <div class="flex items-center gap-3">
        <div
          class="flex h-10 w-10 items-center justify-center rounded-lg"
          :class="statusIconBg"
        >
          <FeatherIcon :name="statusIcon" class="h-5 w-5" :class="statusIconColor" />
        </div>
        <div>
          <h3 class="font-medium text-ink-gray-9">{{ site.container_name || site.name }}</h3>
          <p class="text-sm text-ink-gray-5">{{ site.image || site.plan }}</p>
        </div>
      </div>
      <Badge
        :variant="badgeVariant"
        :label="site.status"
      />
    </div>

    <div class="flex items-center justify-between text-sm">
      <div class="flex flex-col gap-1">
        <span v-if="site.ip_address" class="text-ink-gray-7 font-mono">{{ site.ip_address }}</span>
        <span class="text-ink-gray-5">{{ site.created }}</span>
      </div>
      <FeatherIcon name="chevron-right" class="h-4 w-4 text-ink-gray-4" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Badge, FeatherIcon } from 'frappe-ui'
import { getStatusStyles } from '@/utils/statusStyles'

const props = defineProps({
  site: {
    type: Object,
    required: true,
  },
})

defineEmits(['click'])

// Computed properties using centralized status styles
const statusStyles = computed(() => getStatusStyles(props.site.status))
const badgeVariant = computed(() => statusStyles.value.badgeVariant)
const statusIcon = computed(() => statusStyles.value.icon)
const statusIconBg = computed(() => statusStyles.value.bgClass)
const statusIconColor = computed(() => statusStyles.value.iconClass)
</script>
