@props(['colsize', 'sellectedItem'])
<div class="{{ $colsize }} d-flex align-items-center">
    <i id="icon-all"
        class="fas fa-globe mx-3 cursor-pointer fs-1 icon-hover {{ $sellectedItem == 'all' ? 'text-red' : '' }}"
        wire:click="changeVesselType('all')"></i>
    @foreach (App\Enums\VesselType::cases() as $vesselType)
        <i id="icon-{{ $vesselType }}"
            class="{{ $vesselType->icon() }} mx-3 cursor-pointer fs-1 icon-hover {{ $sellectedItem == $vesselType->value ? 'text-red' : '' }}"
            wire:click="changeVesselType('{{ $vesselType }}')"></i>
    @endforeach
</div>
{{-- <div class="col-3 d-flex align-items-center justify-content-center">
    <select class="form-select form-select-solid" data-control="select2"
        data-placeholder="Select Vessel type first" data-allow-clear="true"
        multiple="multiple">
        @forelse ($sellectedItem as $tour)
            <option value="{{ $tour->id }}">{{ $tour->name }}</option>
        @empty
            <option disabled>No Vessel available for selected Vessel type</option>
        @endforelse
    </select>
</div> --}}