@props([
    'type' => 'generic', // survey | group-survey | forum | board | poll | readings | generic
    'title' => null,
    'subtitle' => null,
    'session' => null,
    'canvasUrl' => null,
])

@php
    $defaults = [
        'survey' => ['icon' => '📊', 'title' => 'End of Session Survey'],
        'group-survey' => ['icon' => '👥', 'title' => 'Group Work Survey'],
        'forum' => ['icon' => '💬', 'title' => 'Discussion Forum'],
        'board' => ['icon' => '📋', 'title' => 'Collaborative Board'],
        'poll' => ['icon' => '🗳️', 'title' => 'Poll'],
        'readings' => ['icon' => '📚', 'title' => 'Reading Library'],
        'generic' => ['icon' => '📝', 'title' => 'Activity'],
    ];
    $meta = $defaults[$type] ?? $defaults['generic'];
    $resolvedTitle = $title ?: $meta['title'];
    $icon = $meta['icon'];
@endphp

<div class="glass border-b border-white/20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white text-xl">
                    {{ $icon }}
                </div>
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-800">{{ $resolvedTitle }}</h1>
                    @if($subtitle)
                        <p class="text-gray-600 mt-1">{{ $subtitle }}</p>
                    @endif
                    @if($session)
                        <div class="mt-2">
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">{{ $session }}</span>
                        </div>
                    @endif
                </div>
            </div>
            <div class="flex items-center space-x-3">
                @if($canvasUrl)
                    <a href="{{ $canvasUrl }}" target="_blank" class="bg-gradient-to-r from-green-600 to-green-800 text-white px-4 py-2 rounded-lg font-medium hover:from-green-700 hover:to-green-900 transition-all duration-300">
                        <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                        View in Canvas
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>