@props([
    'variant' => 'secondary',   // primary | secondary | ghost | danger
    'size'    => 'md',          // sm | md | lg
    'block'   => false,
    'icon'    => null,
    'iconRight' => null,
    'as'      => 'button',      // button | a | submit
    'href'    => null,
    'disabled'=> false,
    'label'   => null,          // aria-label for icon-only buttons
])

@php
    $classes = ['dc-btn'];
    $classes[] = 'dc-btn--'.$variant;
    if ($size === 'sm') { $classes[] = 'dc-btn--sm'; }
    if ($size === 'lg') { $classes[] = 'dc-btn--lg'; }
    if ($block)        { $classes[] = 'dc-btn--block'; }
    if (! $slot->isEmpty() === false && $icon && ! $iconRight) { $classes[] = 'dc-btn--icon'; }
    $tag = $as === 'a' ? 'a' : 'button';
    $type = $as === 'submit' ? 'submit' : ($as === 'button' ? 'button' : null);
@endphp

<{{ $tag }}
    @if ($tag === 'a') href="{{ $href }}"
    @else type="{{ $type }}"
    @endif
    @if ($disabled) disabled aria-disabled="true" @endif
    @if ($label) aria-label="{{ $label }}" @endif
    {{ $attributes->merge(['class' => implode(' ', $classes)]) }}
>
    @if ($icon)     <x-icon :name="$icon" size="16" /> @endif
    <span>{{ $slot }}</span>
    @if ($iconRight)<x-icon :name="$iconRight" size="16" /> @endif
</{{ $tag }}>