@props([
    'icon' => 'search'
])

<button
    {{ $attributes }}
    x-data="{
        clicked: false,
        timer: undefined,

        init() {
            this.$el.addEventListener('click', () => {
                this.ani();
            });
        },

        ani() {
            this.clicked = false;
            clearTimeout(this.timer);
            this.$nextTick(() => {
                this.clicked=true;
                this.timer = setTimeout(()=>this.clicked=false, 500);
            });
        },
    }"
    class="btn btn-scale-75 outline-none !ring-0 rounded-full p-1 md:p-2 relative group"
>
    <div
        :class="{'animate-react-once': clicked}"
        class="absolute inset-0 rounded-full border-2 border-white/50 opacity-0"
    ></div>
    <x-icon :name="$icon" class="relative w-[3em] h-[3em] md:w-[4em] md:h-[4em]"></x-icon>
</button>