@props(['role' => 'user', 'compact' => false])

<div @class(['flex gap-3', 'flex-col' => ! $compact, 'flex-col sm:flex-row' => $compact])>
    <a href="{{ route('social.redirect', ['provider' => 'google', 'role' => $role]) }}"
       @class([
           'flex w-full items-center justify-center gap-3 rounded-lg border px-4 py-2 text-sm font-medium shadow-xs transition',
           'border-neutral-300 bg-white text-neutral-800 hover:bg-neutral-50 dark:border-transparent dark:hover:bg-neutral-100' => ! $compact,
           'border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800' => $compact,
       ])>
        <svg class="size-5" viewBox="0 0 48 48" aria-hidden="true">
            <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.3l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z"/>
            <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.1 7-17.6z"/>
            <path fill="#FBBC05" d="M10.5 28.6A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.1.8-4.6l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.7l7.9-6.1z"/>
            <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.9 2.3-8.3 2.3-6.3 0-11.6-4.1-13.5-9.9l-7.9 6.1C6.5 42.6 14.6 48 24 48z"/>
        </svg>
        {{ $compact ? 'Google' : __('app.login.google') }}
    </a>
    <a href="{{ route('social.redirect', ['provider' => 'facebook', 'role' => $role]) }}"
       @if (! $compact) style="background-color:#1877F2;color:#fff" onmouseover="this.style.backgroundColor='#166FE5'" onmouseout="this.style.backgroundColor='#1877F2'" @endif
       @class([
           'flex w-full items-center justify-center gap-3 rounded-lg px-4 py-2 text-sm font-medium shadow-xs transition',
           'border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800' => $compact,
       ])>
        <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M24 12a12 12 0 1 0-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9V12h3.4l-.5 3.5h-2.9v8.4A12 12 0 0 0 24 12z"/>
        </svg>
        {{ $compact ? 'Facebook' : __('app.login.facebook') }}
    </a>
</div>