<script setup lang="ts">
import { Link } from '@inertiajs/vue3'

defineProps<{ component: any }>()
</script>

<template>
  <div class="max-w-2xl mx-auto p-8 bg-white shadow-lg rounded-lg">
    <h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>

    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
      <div class="px-3 py-2 border rounded text-gray-700">
        {{ component.name }}
      </div>
    </div>

    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
      <div class="px-3 py-2 border rounded text-gray-700">${{ component.price }}</div>
    </div>

    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
      <div class="px-3 py-2 border rounded text-gray-700">
        {{ component.type?.name ?? 'N/A' }}
      </div>
    </div>

    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
      <div class="px-3 py-2 border rounded text-gray-700">
        {{ component.purchaseDate }}
      </div>
    </div>

    <Link
      :href="`/components/${component.id}/edit`"
      type="button"
      as="button"
      class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
    >
      Edit
    </Link>
  </div>
</template>
