'use client';

import { signIn } from 'next-auth/react';

export function LoginButton() {
  return (
    <button
      onClick={() => signIn('google', { callbackUrl: '/dashboard' })}
      style={{
        background: '#38bdf8',
        border: 'none',
        color: '#0f172a',
        padding: '0.75rem 1.5rem',
        borderRadius: '9999px',
        fontSize: '1rem',
        fontWeight: 600,
        display: 'inline-flex',
        alignItems: 'center',
        gap: '0.5rem',
        boxShadow: '0 10px 25px rgba(14, 165, 233, 0.35)'
      }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        style={{ width: '1.25rem', height: '1.25rem' }}
      >
        <path
          d="M21.35 11.1h-9.18v2.92h5.34c-.23 1.22-.93 2.26-1.98 2.95v2.44h3.2c1.87-1.72 2.95-4.26 2.95-7.24 0-.7-.06-1.37-.18-2.07z"
          fill="#4285F4"
        />
        <path
          d="M12.17 22c2.67 0 4.91-.89 6.54-2.39l-3.2-2.44c-.89.6-2.03.96-3.34.96-2.56 0-4.73-1.73-5.5-4.06H3.36v2.55C4.97 19.92 8.3 22 12.17 22z"
          fill="#34A853"
        />
        <path
          d="M6.67 14.07c-.2-.6-.31-1.24-.31-1.9s.11-1.3.31-1.9V7.72H3.36a9.86 9.86 0 0 0 0 8.28l3.31-1.93z"
          fill="#FBBC05"
        />
        <path
          d="M12.17 6.58c1.45 0 2.75.5 3.77 1.47l2.82-2.82C17.08 3.17 14.84 2.2 12.17 2.2 8.3 2.2 4.97 4.28 3.36 7.45l3.31 2.55c.77-2.33 2.94-4.06 5.5-4.06z"
          fill="#EA4335"
        />
      </svg>
      Continue with Google
    </button>
  );
}