{{--
    Dropdown Item Component - AdminLTE style
--}}

@props([
    'href' => null,
    'icon' => null,
    'variant' => 'default',
    'disabled' => false,
])

@php
    $tag = $href ? 'a' : 'button';
@endphp

<style>
    .dropdown-item-lte {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: #212529;
        text-align: left;
        text-decoration: none;
        background-color: transparent;
        border: 0;
        border-radius: calc(var(--lte-border-radius, 0.375rem) - 2px);
        cursor: pointer;
        transition: background-color var(--lte-transition-speed, 0.3s) ease, color var(--lte-transition-speed, 0.3s) ease;
    }
    .dropdown-item-lte:hover,
    .dropdown-item-lte:focus {
        background-color: rgba(0, 0, 0, 0.04);
        color: var(--lte-primary, #0d6efd);
        outline: none;
    }
    .dropdown-item-lte-danger {
        color: var(--lte-danger, #dc3545);
    }
    .dropdown-item-lte-danger:hover,
    .dropdown-item-lte-danger:focus {
        background-color: rgba(220, 53, 69, 0.08);
        color: var(--lte-danger, #dc3545);
    }
    .dropdown-item-lte-success {
        color: var(--lte-success, #198754);
    }
    .dropdown-item-lte-success:hover,
    .dropdown-item-lte-success:focus {
        background-color: rgba(25, 135, 84, 0.08);
        color: var(--lte-success, #198754);
    }
    .dropdown-item-lte-disabled {
        pointer-events: none;
        opacity: 0.5;
    }
    .dropdown-item-lte-icon {
        flex-shrink: 0;
        width: 1.125rem;
        height: 1.125rem;
    }
    .dropdown-item-lte-text {
        flex: 1;
    }
    /* Dark mode */
    .dark .dropdown-item-lte {
        color: #e5e7eb;
    }
    .dark .dropdown-item-lte:hover,
    .dark .dropdown-item-lte:focus {
        background-color: rgba(255, 255, 255, 0.04);
    }
</style>

<{{ $tag }}
    @if($href) href="{{ $href }}" @endif
    @if($tag === 'button') type="button" @endif
    @if($disabled) disabled @endif
    {{ $attributes->class([
        'dropdown-item-lte',
        'dropdown-item-lte-danger' => $variant === 'danger',
        'dropdown-item-lte-success' => $variant === 'success',
        'dropdown-item-lte-disabled' => $disabled,
    ]) }}
>
    @if($icon)
        <x-dynamic-component :component="$icon" class="dropdown-item-lte-icon" />
    @endif
    <span class="dropdown-item-lte-text">{{ $slot }}</span>
</{{ $tag }}>