@extends('layouts.app')

@section('content')
<div class="max-w-xl mx-auto">

    <div class="bg-white p-6 rounded-2xl shadow-lg border">

        <h1 class="text-2xl font-bold mb-2">{{ $topic->name }}</h1>

        @if($topic->description)
            <p class="text-gray-600 mb-4">{{ $topic->description }}</p>
        @endif

        {{-- Difficulty --}}
        @if($topic->difficulty)
        <span class="inline-block px-3 py-1 rounded-full text-sm mb-4
            @if($topic->difficulty == 'easy') bg-green-100 text-green-700
            @elseif($topic->difficulty == 'medium') bg-yellow-100 text-yellow-700
            @else bg-red-100 text-red-700 @endif">
            {{ ucfirst($topic->difficulty) }}
        </span>
        @endif


        {{-- Stats Section --}}
        <div class="space-y-2 mb-6">
            <div class="flex justify-between">
                <span class="text-gray-700">Questions:</span>
                <span class="font-semibold">{{ count($questions) }}</span>
            </div>

            <div class="flex justify-between">
                <span class="text-gray-700">XP Reward:</span>
                <span class="font-semibold">{{ count($questions) * 10 }} XP</span>
            </div>
        </div>


        {{-- Start Button --}}
        @if(count($questions) > 0)
            <a href="{{ route('quiz.play', $topic->id) }}"
               class="block w-full text-center bg-blue-600 text-white py-3 rounded-xl text-lg font-semibold shadow hover:bg-blue-700 transition">
               Start Challenge 🚀
            </a>
        @else
            <p class="text-center text-red-600 font-medium">
                No questions available for this topic.
            </p>
        @endif

    </div>

</div>
@endsection