@props([
    'href' => null,
    'variant' => 'primary',
    'size' => 'md',
    'type' => 'button',
    'disabled' => false,

    // ICON
    'icon' => null,
    'iconPosition' => 'left', // left | right | top | bottom
])

@php
    $baseClass = 'fluent-button';

    $variantClass = match($variant) {
        'primary' => 'fluent-button--primary',
        'outline' => 'fluent-button--outline',
        'subtle' => 'fluent-button--subtle',
        'ghost' => 'fluent-button--ghost',
        'success' => 'fluent-button--success',
        'danger' => 'fluent-button--danger',
        'warning' => 'fluent-button--warning',
        'info' => 'fluent-button--info',
        default => 'fluent-button--primary',
    };

    $sizeClass = match($size) {
        'sm' => 'fluent-button--sm',
        'lg' => 'fluent-button--lg',
        default => 'fluent-button--md',
    };

    $iconClass = $icon ? "is-icon is-icon--{$iconPosition}" : '';

    $classes = trim("$baseClass $variantClass $sizeClass $iconClass");
@endphp

{{-- =========================
     RENDER AS LINK
========================= --}}
@if($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>

        @if($icon && $iconPosition === 'top')
            <span class="fluent-button__icon">
                <x-fluent-icon :name="$icon" />
            </span>
        @endif

        <span class="fluent-button__content">

            @if($icon && $iconPosition === 'left')
                <span class="fluent-button__icon">
                    <x-fluent-icon :name="$icon" />
                </span>
            @endif

            <span class="fluent-button__text">
                {{ $slot }}
            </span>

            @if($icon && $iconPosition === 'right')
                <span class="fluent-button__icon">
                    <x-fluent-icon :name="$icon" />
                </span>
            @endif

        </span>

        @if($icon && $iconPosition === 'bottom')
            <span class="fluent-button__icon">
                <x-fluent-icon :name="$icon" />
            </span>
        @endif

    </a>

{{-- =========================
     RENDER AS BUTTON
========================= --}}
@else
    <button type="{{ $type }}" 
        {{ $disabled ? 'disabled' : '' }} 
        {{ $attributes->merge(['class' => $classes]) }}>

        @if($icon && $iconPosition === 'top')
            <span class="fluent-button__icon">
                <x-fluent-icon :name="$icon" />
            </span>
        @endif

        <span class="fluent-button__content">

            @if($icon && $iconPosition === 'left')
                <span class="fluent-button__icon">
                    <x-fluent-icon :name="$icon" />
                </span>
            @endif

            <span class="fluent-button__text">
                {{ $slot }}
            </span>

            @if($icon && $iconPosition === 'right')
                <span class="fluent-button__icon">
                    <x-fluent-icon :name="$icon" />
                </span>
            @endif

        </span>

        @if($icon && $iconPosition === 'bottom')
            <span class="fluent-button__icon">
                <x-fluent-icon :name="$icon" />
            </span>
        @endif

    </button>
@endif