@props(['id', 'like' => false, 'favourite' => false])
<div class="">
    <x-ui.button-sm @class(["text-accent-600", 'liked' => $like]) onclick="like(this, {{$id}})">
        <x-heroicon-o-heart
            @class([
               "like w-4",
               'hidden' => $like
            ])
        />
        <x-heroicon-s-heart
            @class([
               "like w-4 text-red-500",
               'hidden' => !$like
            ])
        />
    </x-ui.button-sm>

    <x-ui.button-sm class="text-accent-600" onclick="favorite(this, {{$id}})">
        <x-heroicon-o-star
            @class([
               "favorite w-4",
               'hidden' => $favourite
            ])
        />

        <x-heroicon-s-star
            @class([
               "favorite w-4 text-yellow-500",
               'hidden' => !$favourite
            ])
        />

    </x-ui.button-sm>

    <x-ui.button-sm class="text-accent-600">
        <x-heroicon-o-exclamation-circle class="w-4"/>
    </x-ui.button-sm>
</div>