{{-- One action in an `<x-fab-menu>`: a 56px pill with an icon and a label, rising into place as
     the menu opens. `link` makes it an anchor (with `wire:navigate` unless `external`); `color`
     should match the menu's. --}}

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

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

    $colours = [
        'primary' => 'bg-primary-container text-on-primary-container',
        'secondary' => 'bg-secondary-container text-on-secondary-container',
        'tertiary' => 'bg-tertiary-container text-on-tertiary-container',
    ][in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary'];

    $attributes = $attributes
        ->class([
            'state-layer inline-flex h-14 shrink-0 cursor-pointer items-center gap-2 rounded-corner-full px-6 whitespace-nowrap type-title-md shadow-elevation-3 outline-none',
            'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-secondary',
            'transition-[translate,opacity] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast starting:translate-y-2 starting:opacity-0',
            $colours,
        ])
        ->merge(array_filter([
            '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" class="size-6" />
    @endif

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