{{-- An M3 Expressive floating action button: the screen's primary action.

     With only an `icon` it is a FAB — `size` `sm` 56px (the default; M3's deprecated small FAB is
     gone, so this is the baseline FAB), `md` 80px, `lg` 96px. With a `label` it is an extended
     FAB at the same three heights. `color` is `primary` (the default), `secondary` or `tertiary`,
     drawn in its container, or in the colour itself with `variant="filled"`.

     It does not place itself: put it where the layout wants it, e.g.
     `<div class="fixed end-4 bottom-4"><x-fab icon="add" tooltip="New share" /></div>`. For a
     create action that is a FAB on a phone and a header button above, use `<x-button fab>`.

     Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
     (androidx Compose Material 3, Apache-2.0). --}}

@props([
    'icon' => null,
    'label' => null,
    'size' => 'sm',
    'color' => 'primary',
    'variant' => 'container',
    'link' => null,
    'external' => false,
    'tooltip' => null,
    'disabled' => false,
    'type' => 'button',
])

@php
    $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'sm';
    $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
    $extended = filled($label) || $slot->isNotEmpty();
    $isLink = filled($link);

    $colours = $variant === 'filled'
        ? ['primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary'][$color]
        : ['primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container'][$color];

    $dimensions = $extended
        ? ['sm' => 'h-14 min-w-14 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-3 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-4 px-7 rounded-corner-xl type-headline-sm'][$size]
        : ['sm' => 'size-14 rounded-corner-lg', 'md' => 'size-20 rounded-corner-lg-increased', 'lg' => 'size-24 rounded-corner-xl'][$size];

    $iconSize = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-8'][$size];
    $anchor = $tooltip !== null ? '--material-fab-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
    $tag = $isLink ? 'a' : 'button';

    $attributes = $attributes
        ->class([
            'state-layer focus-ring inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap',
            'shadow-elevation-3 hover:shadow-elevation-4 transition-[box-shadow,background-color,color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
            $dimensions,
            $colours,
            'disabled:cursor-not-allowed disabled:bg-on-surface/10 disabled:text-on-surface/38 disabled:shadow-none',
        ])
        ->merge(array_filter([
            'href' => $isLink ? $link : null,
            'target' => $isLink && $external ? '_blank' : null,
            'rel' => $isLink && $external ? 'noopener' : null,
            'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
            'type' => $isLink ? null : $type,
            'disabled' => ! $isLink && $disabled ? true : null,
            'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
            'style' => $anchor ? "anchor-name: {$anchor}" : null,
        ], fn ($value): bool => $value !== null));
@endphp

<{{ $tag }} {{ $attributes }}>
    @if ($icon)
        <x-icon :name="$icon" :class="$iconSize" />
    @endif

    @if ($extended)
        <span>{{ $label ?? $slot }}</span>
    @endif

    @if ($tooltip !== null)
        <x-tooltip :text="$tooltip" :anchor="$anchor" />
    @endif
</{{ $tag }}>