@props([
    'as' => 'a',
    'href' => '#'
])

@if (substr($as, 0, 2) == 'x-')
    <x-dynamic-component
        {{ $attributes->merge(['href' => $href])->class([
            'cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md',
            'hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item'
        ]) }}
        :component="substr($as, 2)"
    >{{ $slot }}</x-dynamic-component>
@else
    <{{ $as }}
        href="{{ $href }}"
        {{ $attributes->class([
            'cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md',
            'hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item'
        ]) }}
    >{{ $slot }}</{{ $as }}>
@endif