<script setup lang="ts">
interface Props {
  task: any // TODO: Type properly
}

const props = defineProps<Props>()
</script>

<template>
  <div class="space-y-6">
    <!-- Applicant Info -->
    <div v-if="task.task_info?.applicant_info">
      <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Applicant Information</h3>
      <div class="border rounded-lg overflow-hidden">
        <table class="w-full text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr v-for="(value, key) in task.task_info.applicant_info" :key="key">
              <td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
              <td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Vehicle Info -->
    <div v-if="task.task_info?.vehicle_info">
      <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Vehicle Information</h3>
      <div class="border rounded-lg overflow-hidden">
        <table class="w-full text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr v-for="(value, key) in task.task_info.vehicle_info" :key="key">
              <td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
              <td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Policy Details -->
    <div v-if="task.task_info?.policy_details">
      <h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Policy Details</h3>
      <div class="border rounded-lg overflow-hidden">
        <table class="w-full text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Field</th>
              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr v-for="(value, key) in task.task_info.policy_details" :key="key">
              <td class="px-3 py-2 text-gray-600 font-medium capitalize">{{ key.replace(/_/g, ' ') }}</td>
              <td class="px-3 py-2 text-gray-900">{{ value || '—' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
