make a dinamic component modal for delete depending one variable in Laravel 10

Question

I need to use a component in laravel that I made to delete an 'id' from a database. Since here all ok, the problem starts when I try to make it dynamic, changing the route depending on a variable sent by the view. Im using Laravel 10, and Alpine js.

Here is my component class:

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class deleteModal extends Component
{
    public $id;
    public $name;
    
    public function __construct($id, $name)
    {
        $this->name = $name;
        $this->id = $id;
    }
    
    public function render(): View|Closure|string
    {
        return view('components.deleteModal');
    }
}

Here is the call for my component.

<x-deleteModal :id="$client->client_id" :name="$client->client_name"/>

here I send to the component delete modal the id, and the name. Here is my component deletemodal.

@props(['id', 'name'])
<div x-data="{ open: false}" x-cloak>
    <button @click="open = true">
        <img class="w-7" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
    </button>
    <div x-show="open" x-cloak x-transition class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div class="fixed inset-0 flex items-center justify-center">
            <div class="bg-white p-7 rounded-lg shadow-md">
                <p>¿Estás seguro de que deseas eliminar a {{$name}} con ID {{$id}}?</p>
                <div class="flex justify-end mt-4">
                    <form action="{{ route( 'clients.destroy', ['client' => $id]) }}" method="POST">
                        <button @click="open = false" class="px-4 py-2 bg-blue-600 text-white rounded-md mr-2">Eliminar</button>
                            @csrf
                            @method('DELETE')
                        <button type="submit" style="display: none;"></button>
                    </form>
                    <button @click="open = false" class="px-4 py-2 bg-red-600 text-white rounded-md">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>

`im using a form to send the data to the controller clients.destroy. This is a working modal. The problem is that i don't know how I could make this for thre or four routes, is suposed a component is used to use a lot of times depending the data you send him, well, i try a lot of things to make this modal dinamic, none of them didn't work. Please some ideas