import { redirect } from '@/routes/auth/google';

function GoogleIcon() {
    return (
        <svg viewBox="0 0 24 24" className="size-4 shrink-0">
            <path
                fill="#4285F4"
                d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.8z"
            />
            <path
                fill="#34A853"
                d="M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1A12 12 0 0 0 12 24z"
            />
            <path
                fill="#FBBC05"
                d="M5.3 14.3a7.2 7.2 0 0 1 0-4.6V6.6h-4a12 12 0 0 0 0 10.8l4-3.1z"
            />
            <path
                fill="#EA4335"
                d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.3 6.6l4 3.1c.9-2.8 3.6-4.9 6.7-4.9z"
            />
        </svg>
    );
}

function AppleIcon() {
    return (
        <svg viewBox="0 0 24 24" className="size-4 shrink-0 fill-current">
            <path d="M16.4 12.7c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4.1zM13.9 5c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.2 1.2.1 2.3-.6 3-1.5z" />
        </svg>
    );
}

const buttonClass =
    'flex h-11 items-center justify-center gap-2.5 rounded-lg border border-navy/10 bg-gray-100 px-4 text-sm font-medium transition-colors hover:bg-gray-200 dark:border-white/10 dark:bg-ink-soft dark:hover:bg-white/10';

export default function SocialButtons({
    action = 'Sign in',
}: {
    action?: 'Sign in' | 'Sign up';
}) {
    return (
        <>
            <div className="my-5 flex items-center gap-4 text-sm text-gray-400 dark:text-white/50">
                <span className="h-px flex-1 bg-navy/10 dark:bg-white/10" />
                Or
                <span className="h-px flex-1 bg-navy/10 dark:bg-white/10" />
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
                <a href={redirect.url()} className={buttonClass}>
                    <GoogleIcon />
                    {action} with Google
                </a>
                <button
                    type="button"
                    disabled
                    title="Coming soon"
                    className={`${buttonClass} cursor-not-allowed opacity-60`}
                >
                    <AppleIcon />
                    {action} with Apple
                </button>
            </div>
        </>
    );
}