<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({
  session: {
    type: Object,
    required: true,
  },
})

const handleComplete = () => {
  router.put(`/sessions/${props.session.id}`)
}
</script>

<template>
    <Head :title="`${session.category.name} Questionnaire`" />

    <div class="max-w-4xl mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-white mb-6">{{ session.category.name }} Questionnaire</h1>

        <div class="space-y-6">
            <div class="bg-surface/50 rounded-lg p-6">
                <h2 class="text-xl font-semibold text-white mb-4">Basic Info Form</h2>
                <p class="text-gray-400">Client and lead firm information will appear here</p>
            </div>

            <div class="bg-surface/50 rounded-lg p-6">
                <h2 class="text-xl font-semibold text-white mb-4">Questions</h2>
                <p class="text-gray-400">Category questions will appear here</p>
            </div>
        </div>

        <div class="flex justify-end mt-8">
            <AppButton size="lg" @click="handleComplete">
                Complete
            </AppButton>
        </div>
    </div>
</template>
