<script setup>
import { Head, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const props = defineProps({
  screening: {
    type: Object,
    required: true,
  },
  categories: {
    type: Array,
    required: true,
  },
})

const handleStartCategory = (categoryId) => {
  router.post('/sessions', {
    category_id: categoryId,
    screening_id: props.screening.id,
  })
}
</script>

<template>
    <Head title="Screening Result" />

    <div class="max-w-4xl mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-white mb-6">Screening Result</h1>

        <div class="bg-surface/50 rounded-lg p-6 mb-8">
            <p class="text-gray-400 text-center mb-4">Your screening result: Passed</p>
        </div>

        <div class="space-y-4">
            <h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
            <div
                v-for="category in categories"
                :key="category.id"
                class="bg-surface/50 rounded-lg p-4 flex items-center justify-between hover:bg-surface/70 transition-colors"
            >
                <span class="text-white font-medium">{{ category.name }}</span>
                <AppButton size="md" @click="handleStartCategory(category.id)">
                    Start
                </AppButton>
            </div>
        </div>
    </div>
</template>
