{{-- One item in an `<x-menu>`: an action, a link, or a choice.

     `label`, a leading `icon`, an `icon-right`, a `description` under the label and a
     `shortcut` at the end (M3's trailing supporting text: "⌘C"). `link` makes it an anchor, with
     `wire:navigate` unless `external` or `no-wire-navigate`. `selected` (true or false) makes it a
     `menuitemcheckbox` with `aria-checked`; a selected item takes Expressive's selected shape and
     tertiary-container. `disabled` keeps it in the list, out of reach. `keep-open` leaves the menu
     open when it is activated — for a choice the person may want to change twice.

     44px tall (SegmentedMenuTokens.Item), body-large label, 20px icons, 4px corners that open to
     12px at the ends of the list. --}}

@props([
    'label' => null,
    'icon' => null,
    'iconRight' => null,
    'description' => null,
    'shortcut' => null,
    'link' => null,
    'external' => false,
    'noWireNavigate' => false,
    'selected' => null,
    'disabled' => false,
    'keepOpen' => false,
])

@php
    $isLink = filled($link);
    $tag = $isLink ? 'a' : 'button';

    $attributes = $attributes
        ->class([
            'group/item state-layer flex w-full min-h-11 cursor-pointer items-center gap-3 px-3 text-start outline-none',
            'rounded-corner-xs first:rounded-t-corner-md last:rounded-b-corner-md',
            'transition-[border-radius,background-color] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast',
            'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-secondary',
            'py-2' => filled($description),
            'rounded-corner-md bg-tertiary-container text-on-tertiary-container' => $selected === true,
            'pointer-events-none text-on-surface/38' => $disabled,
        ])
        ->merge(array_filter([
            'role' => $selected === null ? 'menuitem' : 'menuitemcheckbox',
            'aria-checked' => $selected === null ? null : ($selected ? 'true' : 'false'),
            'aria-disabled' => $disabled ? 'true' : null,
            'tabindex' => '-1',
            'type' => $isLink ? null : 'button',
            'href' => $isLink ? $link : null,
            'target' => $isLink && $external ? '_blank' : null,
            'rel' => $isLink && $external ? 'noopener' : null,
            'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
            'data-keep-open' => $keepOpen ? true : null,
        ], fn ($value): bool => $value !== null));

    $iconInk = match (true) {
        $disabled => 'text-on-surface/38',
        $selected === true => 'text-on-tertiary-container',
        default => 'text-on-surface-variant',
    };
@endphp

<{{ $tag }} {{ $attributes }}>
    @if ($icon)
        <x-icon :name="$icon" :filled="$selected === true" :class="'size-5 '.$iconInk" />
    @endif

    <span class="min-w-0 flex-1">
        <span class="block truncate type-body-lg">{{ $label ?? $slot }}</span>

        @if ($description)
            <span @class(['block type-body-md', $iconInk])>{{ $description }}</span>
        @endif
    </span>

    @if ($shortcut)
        <span @class(['shrink-0 type-label-sm', $iconInk])>{{ $shortcut }}</span>
    @endif

    @if ($iconRight)
        <x-icon :name="$iconRight" :class="'size-5 '.$iconInk" />
    @endif
</{{ $tag }}>