video-flow-b/components/ui/google-login-button.tsx

"use client";

import React, { useState } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface GoogleLoginButtonProps {
  onClick?: () => void;
  disabled?: boolean;
  loading?: boolean;
  className?: string;
  size?: "sm" | "md" | "lg";
  variant?: "default" | "outline";
}

// Google logo SVG component matching the exact reference
const GoogleLogo = ({ className }: { className?: string }) => (
  <svg
    height="24"
    viewBox="0 0 24 24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
      fill="#4285F4"
    />
    <path
      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      fill="#34A853"
    />
    <path
      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
      fill="#FBBC05"
    />
    <path
      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      fill="#EA4335"
    />
    <path d="M1 1h22v22H1z" fill="none" />
  </svg>
);

const sizeVariants = {
  sm: {
    button: "h-10 px-4 text-sm sm:px-6",
    icon: "w-4 h-4 flex-shrink-0",
    gap: "gap-2 sm:gap-3",
  },
  md: {
    button: "h-10 px-4 text-sm sm:h-12 sm:px-6 sm:text-base",
    icon: "w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0",
    gap: "gap-2 sm:gap-3",
  },
  lg: {
    button: "h-12 px-6 text-base sm:h-14 sm:px-8 sm:text-lg",
    icon: "w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0",
    gap: "gap-3 sm:gap-4",
  },
};

const variantStyles = {
  default: {
    base: "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 hover:border-gray-400 focus:bg-gray-50 focus:border-gray-400 shadow-sm hover:shadow-md",
    disabled: "bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed shadow-none",
  },
  outline: {
    base: "bg-white/10 backdrop-blur-sm text-white border border-white/20 hover:bg-white/20 hover:border-white/30 focus:bg-white/20 focus:border-white/30 shadow-lg hover:shadow-xl",
    disabled: "bg-white/5 text-white/40 border-white/10 cursor-not-allowed shadow-none backdrop-blur-sm",
  },
};

export const GoogleLoginButton = React.forwardRef<
  HTMLButtonElement,
  GoogleLoginButtonProps
>(
  (
    {
      onClick,
      disabled = false,
      loading = false,
      className,
      size = "md",
      variant = "default",
      ...props
    },
    ref
  ) => {
    const [isPressed, setIsPressed] = useState(false);
    const sizeConfig = sizeVariants[size];
    const variantConfig = variantStyles[variant];

    const handleClick = () => {
      if (!disabled && !loading && onClick) {
        onClick();
      }
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        setIsPressed(true);
        handleClick();
      }
    };

    const handleKeyUp = (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' || e.key === ' ') {
        setIsPressed(false);
      }
    };

    const handleMouseDown = () => setIsPressed(true);
    const handleMouseUp = () => setIsPressed(false);
    const handleMouseLeave = () => setIsPressed(false);

    const isDisabled = disabled || loading;

    return (
      <button
        ref={ref}
        type="button"
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        onKeyUp={handleKeyUp}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseLeave}
        disabled={isDisabled}
        className={cn(
          // Base styles
          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 ease-in-out",
          "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500/50",
          "active:scale-[0.98] transform select-none",

          // Size styles
          sizeConfig.button,
          sizeConfig.gap,

          // Variant styles
          isDisabled ? variantConfig.disabled : variantConfig.base,

          // Pressed state
          isPressed && !isDisabled && "scale-[0.98]",

          // Custom className
          className
        )}
        aria-label={loading ? "Signing in with Google" : "Google Login"}
        aria-disabled={isDisabled}
        role="button"
        tabIndex={isDisabled ? -1 : 0}
        {...props}
      >
        {loading ? (
          <Loader2 className={cn("animate-spin", sizeConfig.icon)} />
        ) : (
          <GoogleLogo className={sizeConfig.icon} />
        )}
        <span className="font-medium">
          {loading ? "Signing in..." : "Google Login"}
        </span>
      </button>
    );
  }
);

GoogleLoginButton.displayName = "GoogleLoginButton";