@props([
    'provider' => '',       // e.g. 'nearby'
    'name' => '',           // e.g. 'Proximité'
    'description' => null,  // short text
    'logo' => null,         // path under public/, e.g. 'metronic/media/brand-logos/jira.svg'
    'logoDark' => null,     // path under public/, e.g. 'metronic/media/brand-logos/jira.svg'
    'link' => null,         // title link
    'showButton' => true,   // show the primary footer button (Connect/Disconnect/Open)
    'route' => null
])

@php
    // default logo path fallback based on your assets location
    $logoPath = $logo ?? "assets/images/svg_icons/{$provider}.svg";
    $logoPathDark = $logoDark ?? "assets/images/svg_icons/inverse/{$provider}.svg";

    $routeName = $route ?? null;
    $hasRoute  = $routeName && Route::has($routeName);
    $url       = $hasRoute ? route($routeName) : ($link ? $link : '#');
@endphp

<style>
    .channel-stats-bg {
        background-image: url('/assets/media/images/2600x1600/bg-3.png');
    }

    .dark .channel-stats-bg {
        background-image: url('/assets/media/images/2600x1600/bg-3-dark.png');
    }
</style>

{{-- <div class="kt-card" data-provider="{{ $provider }}">
    <div class="kt-card-content p-5 lg:p-7.5">
        <div class="flex items-center justify-between mb-3 lg:mb-5">
            <div class="flex items-center justify-center ">
                <img alt="" class="dark:hidden h-11 shrink-0" src="{{ asset($logoPath) }}" />
                <img alt="" class="hidden dark:inline-block h-11 shrink-0" src="{{ asset($logoPathDark) }}" />
            </div>

            @if ($link)
            <a href="{{ $link }}" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline">
                <i class="ki-filled ki-exit-right-corner"></i>
            </a>
            @else
            <div class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                <i class="ki-filled ki-exit-right-corner"></i>
            </div>
            @endif

        </div>

        <div class="flex flex-col gap-1 lg:gap-2.5">
            <span class="text-base font-smedium text-mono">
                {{ $name }}
            </span>
            @if ($description)
                <span class="text-sm text-secondary-foreground">
                    {{ $description }}
                </span>
            @endif
        </div>
    </div>
 
    @if ($showButton) 
    <div class="kt-card-footer justify-between items-center py-3.5">
        @if ($link)
            <a href="{{ $link }}" class="kt-btn kt-btn-outline">
                <i class="ki-filled ki-mouse-square"></i>
                Open
            </a>
        @else
            <button type="button" class="kt-btn kt-btn-outline" disabled >
                <i class="ki-filled ki-mouse-square"></i>
                Open
            </button>
        @endif
    </div>
    @endif
</div> --}}


<div
    class="kt-card px-5 py-3 lg:px-7.5 h-full bg-[length:85%] [background-position:9rem_-4rem] rtl:[background-position:-4rem_-4rem] bg-no-repeat channel-stats-bg">
    <div class="flex flex-col gap-4 pt-6">
        
        <div class="">
            <img alt="" class="dark:hidden h-11 shrink-0" src="{{ asset($logoPath) }}" />
            <img alt="" class="hidden dark:inline-block h-11 shrink-0" src="{{ asset($logoPathDark) }}" />
        </div>

        <div class="flex flex-col gap-2.5 mb-2">
            <h3 class="text-base font-semibold leading-none text-mono">
                {{ $name }}
            </h3>

            @if ($description)
                <span class="text-sm text-secondary-foreground leading-5">
                    {{ $description }}
                </span>
            @else 
                <span class="text-sm text-secondary-foreground leading-5">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                 </span>   
            @endif
        </div>
    </div>

    @if ($showButton) 
    <div class="py-3.5">
        @if ($link || $hasRoute)
            <a href="{{ $url }}" class="kt-btn kt-btn-outline">
                <i class="ki-filled ki-mouse-square"></i>
                Open
            </a>
        @else
            <button type="button" class="kt-btn kt-btn-outline" disabled >
                <i class="ki-filled ki-mouse-square"></i>
                Open
            </button>
        @endif
    </div>
    @endif

</div>