@props([
    'href' => '#',
    'active' => false,
    'desktop' => false, // لو true: يطبق ستايل ديسكتوب (خط سفلي أنيميت)، غير كده ستايل موبايل
])

@php
    // أساس الكلاسات
    $base = 'inline-flex items-center transition-all whitespace-nowrap';

    // ستايل الديسكتوب: لون + خط سفلي أنيميت عند hover
    $desktopClasses =
        'relative text-white/80 hover:text-white after:absolute after:-bottom-1 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:transition-all after:bg-blue-300';

    // ستايل الموبايل: block + مسافات رأسية بسيطة
    $mobileClasses = 'block py-2 text-white/80 hover:text-white';

    // التمييز للحالة النشطة
    $activeClasses = $desktop
        ? 'text-blue-300 after:w-full' // ديسكتوب: لون أفتح + الخط السفلي ممتد
        : 'text-white font-semibold'; // موبايل: خط أثقل ولون أوضح

    $classes = $base . ' ' . ($desktop ? $desktopClasses : $mobileClasses) . ' ' . ($active ? $activeClasses : '');
@endphp

<a {{ $attributes->merge(['href' => $href, 'class' => $classes, 'aria-current' => $active ? 'page' : 'false']) }}>
    {{ $slot }}
</a>