@props(['data' => [], 'headingIndex' => null])

@php
$level = $data['level'] ?? 2;
$text = $data['text'] ?? $data['content'] ?? '';
$slug = $data['slug'] ?? \Illuminate\Support\Str::slug($text);
$tag = $level === 3 ? 'h3' : 'h2';
$classes = $level === 3
? 'text-xl font-semibold mt-6 mb-3 text-foreground'
: 'text-2xl sm:text-3xl font-bold mt-10 mb-4 text-foreground';
@endphp

<{{ $tag }} id="{{ $slug }}" class="{{ $classes }} scroll-mt-24">
    <a href="#{{ $slug }}" class="hover:text-primary transition-colors">
        {{ $text }}
    </a>
</{{ $tag }}>