@props(['level' => 2, 'rule' => null])

@php
    $level = (int) $level;
    $tag = 'h' . $level;
    $sizeClass = match ($level) {
        1 => 'text-[44px] md:text-[64px]',
        3 => 'text-[28px]',
        default => 'text-[32px] md:text-[48px]',
    };
    $ruleClass = match ($rule) {
        'sm' => 'section-rule section-rule--sm',
        'xs' => 'section-rule section-rule--xs',
        default => 'section-rule',
    };
@endphp
<div {{ $attributes->only('class') }}>
    <{{ $tag }} class="{{ $sizeClass }}">{{ $slot }}</{{ $tag }}>
    <span class="{{ $ruleClass }}" aria-hidden="true"></span>
</div>