{{-- One action in an `<x-fab-menu>`: a 56px pill with an icon and a label, rising into place as
     the menu opens and sinking back as it closes (fab-menu.css drives the exit from the popover's
     own open state). `link` makes it an anchor (with `wire:navigate` unless `external`); `color`
     should match the menu's.

     FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
     8px between the icon and the label, 24px icons, full corner, elevation 3.

     Drawn by resources/css/components/fab-menu-item.css from `data-md-fab-menu-item` and
     `data-md-color`. --}}

@props([
    'label' => null,
    'icon' => null,
    'color' => 'primary',
    'link' => null,
    'external' => false,
])

@php
    $isLink = filled($link);
    $tag = $isLink ? 'a' : 'button';
    $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';

    $attributes = $attributes->merge(array_filter([
        'data-md-fab-menu-item' => true,
        'data-md-color' => $color,
        'role' => 'menuitem',
        'tabindex' => '-1',
        'type' => $isLink ? null : 'button',
        'href' => $isLink ? $link : null,
        'target' => $isLink && $external ? '_blank' : null,
        'rel' => $isLink && $external ? 'noopener' : null,
        'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
    ], fn ($value): bool => $value !== null));
@endphp

<{{ $tag }} {{ $attributes }}>
    @if ($icon)
        <x-livewire-material::icon :name="$icon" size="24" />
    @endif

    <span>{{ $label ?? $slot }}</span>
</{{ $tag }}>