@props([
    'title',
    'subtitle' => null,
    'size' => 'large', // large, medium, small
])

@php
    $titleClasses = match($size) {
        'large' => 'text-3xl md:text-4xl',
        'medium' => 'text-2xl md:text-3xl',
        'small' => 'text-xl md:text-2xl',
        default => 'text-2xl md:text-3xl',
    };
    
    $indicatorClasses = match($size) {
        'large' => 'w-2 h-10',
        'medium' => 'w-1.5 h-8',
        'small' => 'w-1 h-6',
        default => 'w-1.5 h-8',
    };
@endphp

<div class="mb-8">
    <h2 class="font-bold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-3 {{ $titleClasses }}">
        <span class="{{ $indicatorClasses }} gradient-indicator"></span>
        {{ $title }}
    </h2>
    @if($subtitle)
        <p class="text-zinc-600 dark:text-zinc-400 ml-5">{{ $subtitle }}</p>
    @endif
</div>