@props([
    'title' => '',
    'url' => '#',
    'size' => 'md',
    'icon' => null,
    'role' => 'button', // link | button
    'variant' => 'primary', // optional (primary, secondary, dll)
])

@php
    $hasText = !$slot->isEmpty();
    $isButton = $role === 'button' && $hasText;
    $tooltip = $title;

    $baseClass = $isButton 
        ? 'fluent-button fluent-button-' . $variant
        : 'fluent-action-button fluent-action-button-' . $variant;
@endphp

@if($role === 'link')
    <a
        href="{{ $url }}"
        {{ $attributes->merge(['class' => $baseClass]) }}
        title="{{ $tooltip }}"
    >
@else
    <a
        href="#"
        data-modal
        data-modal-title="{{ $title }}"
        data-modal-url="{{ $url }}"
        data-modal-size="{{ $size }}"
        {{ $attributes->merge(['class' => $baseClass]) }}
        title="{{ $tooltip }}"
    >
@endif
    @if($icon)
        <x-fluent-icon :name="$icon" size="{{ $isButton ? 'sm' : 'md' }}" />
    @endif

    @if($hasText)
        <span>{{ $slot }}</span>
    @endif
</a>