@props(['provider'])

<div class="flex-wrap w-full p-1 bg-gray-600 rounded-sm">

    <div class="flex items-center justify-center w-full p-4 py-6 bg-gray-900 rounded-sm">
        @if($provider['name'] == 'facebook')
        <x-fab-facebook class="w-20 h-20 text-facebook " />
        @endif
        @if($provider['name'] == 'twitter')
        <x-fab-x-twitter class="w-20 h-20 text-twitter" />
        @endif
        @if($provider['name'] == 'steam')
        <x-fab-steam class="w-20 h-20 text-[#00adee]" />
        @endif
        @if($provider['name'] == 'twitch')
        <x-fab-twitch class="w-20 h-20 text-[#6441a5] " />
        @endif
    </div>

    {{--
    <div class="p-2">
        @if($provider['name'] == 'stripe')
        <x-fab-cc-stripe class="w-20 h-20 text-[#5433FF] " />
        @endif
        @if($provider['name'] == 'paypal')
        <x-fab-cc-paypal class="w-20 h-20 text-[#0079C1] " />
        @endif
        @if($provider['name'] == 'youtube')
        <x-fab-youtube class="w-20 h-20 text-youtube" />
        @endif
        @if($provider['name'] == 'discord')
        <x-fab-discord class="w-20 h-20 text-[#7289da] " />
        @endif
    </div>
    --}}

    <div class="p-2 my-1 font-mono text-lg font-semibold text-gray-200 bg-gray-950">

        <div class="flex items-center justify-between">
            <div class="capitalize">
                {{$provider['name']}}
            </div>
            <div class="text-xs text-gray-700 ">
                @if($provider['connected'] != false)
                {{__('3 months ago')}}
                @endif
            </div>
        </div>

    </div>


    <div class="p-1 bg-gray-900 rounded-sm">

        @if($provider['connected'] == false)
        <div class="flex items-center justify-between ">

            <x-dynamic-button href="route('oauth.redirect'/* , ['provider' => $provider['id']])"
                class="flex justify-between w-full bg-emerald-600 hover:bg-emerald-800 dark:hover:bg-emerald-700 dark:bg-emerald-500 {{-- focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-500 --}}">

                <x-fas-link class="w-6 h-6 mr-2 text-gray-900" />
                <span class="font-bold text-gray-900 text-md ">
                    {{__('connect')}}
                </span>

            </x-dynamic-button>

        </div>
        @else

        <div class="flex items-center justify-between">
            <x-dynamic-button :disabled="true" href="route('oauth.redirect'/* , ['provider' => $provider['id']])"
                class="flex justify-between w-full bg-emerald-600 hover:bg-emerald-800 dark:hover:bg-emerald-700 dark:bg-emerald-500 {{-- focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-500 --}}">

                <x-fas-check-double class="w-6 h-6 mr-2 text-gray-900" />
                <span class="font-bold text-gray-900 text-md">
                    {{ __('connected') }}
                </span>

            </x-dynamic-button>
        </div>


        @endif
    </div>


</div>