<template>
  <div class="bg-white overflow-hidden shadow rounded-lg">
    <div class="p-5">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-5 w-0 flex-1">
          <dl>
            <dt class="text-sm font-medium text-gray-500 truncate">System Uptime</dt>
            <dd class="text-lg font-medium text-gray-900">{{ uptime }}</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 px-5 py-3">
      <div class="text-sm text-gray-500">
        Host: <span class="font-medium text-gray-900">{{ hostname }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  uptime: string
  hostname: string
}

defineProps<Props>()
</script>
