@props(['variant' => 'primary', 'href' => null, 'align' => 'right'])

@php
    $joinClasses = 'rounded-r-none border-r border-white/20';
@endphp

<div class="inline-flex" role="group">
    @if ($href)
        <a href="{{ $href }}" {{ $attributes->merge(['class' => '']) }}>
            <x-forms.button :variant="$variant" class="{{ $joinClasses }}">{{ $slot }}</x-forms.button>
        </a>
    @else
        <x-forms.button :variant="$variant" type="submit" class="{{ $joinClasses }}">{{ $slot }}</x-forms.button>
    @endif

    <x-dropdown :align="$align" width="48">
        <x-slot name="trigger">
            <x-forms.button :variant="$variant" type="button" class="rounded-l-none px-2.5">
                <i class="fa-solid fa-chevron-down text-xs" aria-hidden="true"></i>
            </x-forms.button>
        </x-slot>
        <x-slot name="content">
            {{ $menu ?? '' }}
        </x-slot>
    </x-dropdown>
</div>