@props(['provider', 'createdAt' => null, 'account' => null, 'icon' => 'fab-facebook'])



<div>
    <div class="flex items-center justify-between pl-3">
        <div class="flex items-center">


            @if($provider['name'] == 'facebook')
            <x-fab-facebook class="w-8 h-8 text-green-600" />
            @endif
            @if($provider['name'] == 'twitter')
            <x-fab-twitter class="w-8 h-8 text-green-600" />
            @endif
            @if($provider['name'] == 'youtube')
            <x-fab-youtube class="w-8 h-8 text-green-600" />
            @endif
            @if($provider['name'] == 'steam')
            <x-fab-steam class="w-8 h-8 text-green-600" />
            @endif
            {{--
            <x-socialstream-icons.provider-icon :provider="$provider['name']" class="w-8 h-8" /> --}}
            {{--
            <x-fab-facebook class="w-8 h-8 text-green-600" /> --}}


            <div class="ml-2">
                <div class="text-sm font-semibold text-gray-600 dark:text-gray-400">
                    {{__($provider['name'])}}
                </div>

                @if (! empty($createdAt))
                <div class="text-xs text-gray-500">
                    {{ __('Connected :createdAt', ['createdAt' => $createdAt]) }}
                </div>
                @else
                <div class="text-xs text-gray-500">
                    {{ __('Not connected.') }}
                </div>
                @endif
            </div>
        </div>

        <div>
            {{-- $action --}}
        </div>
    </div>

    {{-- @error($provider['id'].'_connect_error') --}}
    <div class="px-3 mt-2 text-sm font-semibold text-red-500">

        {{-- $message --}}
    </div>
    {{-- @enderror --}}
</div>