@props([
    'action',
    'featured' => false,
    'disabled' => false,
    'title' => null,
])

<form method="POST" action="{{ $action }}" class="inline-flex">
    @csrf
    <button
        type="submit"
        @disabled($disabled && !$featured)
        class="inline-flex h-8 w-8 items-center justify-center rounded-lg transition {{ $featured ? 'text-amber-400 hover:text-amber-500 hover:bg-amber-50/70' : ($disabled ? 'cursor-not-allowed text-slate-300 opacity-40' : 'text-slate-300 hover:text-amber-400 hover:bg-slate-50') }}"
        title="{{ $title ?: ($featured ? 'Remove from featured showcase' : ($disabled ? 'Maximum showcase items selected' : 'Add to featured showcase')) }}"
    >
        <svg class="h-5 w-5 {{ $featured ? 'fill-amber-400 stroke-amber-400' : 'fill-none stroke-current' }}" viewBox="0 0 24 24" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
        </svg>
    </button>
</form>