<template>
  <div class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
    <div
      class="flex items-start gap-3 px-4"
      :class="[
        compact ? 'py-2' : 'py-3',
        hasDetails ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50' : 'cursor-default'
      ]"
      @click="hasDetails && (detailsOpen = !detailsOpen)"
    >
      <div class="mt-0.5 shrink-0" v-if="!compact">
        <StatusBadge :status="check.status" />
      </div>
      <div v-else class="mt-1.5 shrink-0">
        <span class="inline-block h-1.5 w-1.5 rounded-full"
          :class="{
            'bg-green-500': check.status === 'pass',
            'bg-blue-500': check.status === 'info',
          }"
        ></span>
      </div>
      <div class="min-w-0 flex-1">
        <div class="flex items-baseline justify-between gap-2">
          <h4 :class="compact ? 'text-xs text-gray-700 dark:text-gray-300' : 'text-sm font-medium text-gray-900 dark:text-white'">
            {{ check.title }}
            <span v-if="compact" class="text-gray-400 dark:text-gray-500"> — {{ check.message }}</span>
          </h4>
        </div>
        <p v-if="!compact" class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{{ check.message }}</p>
      </div>
      <div v-if="hasDetails && !compact" class="mt-1 shrink-0 text-gray-400 dark:text-gray-500">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 transition-transform"
          :class="{ 'rotate-180': detailsOpen }"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
    <div v-if="detailsOpen && hasDetails" class="border-t border-gray-100 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-800/30">
      <ul class="space-y-1">
        <li
          v-for="(detail, i) in check.details"
          :key="i"
          class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400"
        >
          <span class="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"></span>
          <span class="font-mono text-xs leading-relaxed">{{ detail }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CheckResult as CheckResultType } from '~/types/dns'

const props = withDefaults(defineProps<{
  check: CheckResultType
  defaultExpanded?: boolean
  compact?: boolean
}>(), {
  defaultExpanded: false,
  compact: false,
})

const detailsOpen = ref(props.defaultExpanded)
const hasDetails = computed(() => props.check.details && props.check.details.length > 0)
</script>
