brackt/app/components/league/WizardAuthForm.tsx

import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { TimezoneSelect } from "~/components/league/TimezoneSelect";
import { cn } from "~/lib/utils";

export interface WizardAuthFormProps {
  authTab: "create" | "login";
  setAuthTab: (v: "create" | "login") => void;
  displayName: string;
  setDisplayName: (v: string) => void;
  authEmail: string;
  setAuthEmail: (v: string) => void;
  authPassword: string;
  setAuthPassword: (v: string) => void;
  userTimezone: string;
  setUserTimezone: (v: string) => void;
  onSocialLogin: (provider: "google" | "discord") => void;
  submitting: boolean;
}

export function WizardAuthForm({
  authTab,
  setAuthTab,
  displayName,
  setDisplayName,
  authEmail,
  setAuthEmail,
  authPassword,
  setAuthPassword,
  userTimezone,
  setUserTimezone,
  onSocialLogin,
  submitting,
}: WizardAuthFormProps) {
  return (
    <div className="border-t pt-4">
      <h3 className="text-base font-semibold mb-3">Your Account</h3>

      <div className="flex rounded-lg border border-border overflow-hidden mb-4">
        <button
          type="button"
          onClick={() => setAuthTab("create")}
          className={cn(
            "flex-1 py-2 text-sm font-medium transition-colors",
            authTab === "create" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
          )}
        >
          Create Account
        </button>
        <button
          type="button"
          onClick={() => setAuthTab("login")}
          className={cn(
            "flex-1 py-2 text-sm font-medium transition-colors",
            authTab === "login" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
          )}
        >
          Log In
        </button>
      </div>

      <div className="space-y-2 mb-4">
        <Button
          type="button"
          variant="outline"
          className="w-full flex items-center gap-2"
          onClick={() => onSocialLogin("discord")}
          disabled={submitting}
        >
          <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.032.055a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
          </svg>
          {authTab === "create" ? "Create Account & League with Discord" : "Log in with Discord & Create League"}
        </Button>
        <Button
          type="button"
          variant="outline"
          className="w-full flex items-center gap-2"
          onClick={() => onSocialLogin("google")}
          disabled={submitting}
        >
          <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24">
            <path fill="#4285F4" 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"/>
            <path fill="#34A853" 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"/>
            <path fill="#FBBC05" 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.93l3.66-2.84z"/>
            <path fill="#EA4335" 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"/>
          </svg>
          {authTab === "create" ? "Create Account & League with Google" : "Log in with Google & Create League"}
        </Button>
      </div>

      <div className="flex items-center gap-2 mb-4">
        <div className="flex-1 border-t border-border" />
        <span className="text-xs text-muted-foreground">or</span>
        <div className="flex-1 border-t border-border" />
      </div>

      <div className="space-y-3">
        {authTab === "create" && (
          <div className="space-y-2">
            <Label htmlFor="displayName">Display Name</Label>
            <Input
              id="displayName"
              type="text"
              placeholder="Your name in the league"
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              autoComplete="name"
            />
          </div>
        )}
        <div className="space-y-2">
          <Label htmlFor="authEmail">Email</Label>
          <Input
            id="authEmail"
            type="email"
            placeholder="you@example.com"
            value={authEmail}
            onChange={(e) => setAuthEmail(e.target.value)}
            autoComplete="email"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="authPassword">Password</Label>
          <Input
            id="authPassword"
            type="password"
            placeholder={authTab === "create" ? "Choose a strong password" : "Your password"}
            value={authPassword}
            onChange={(e) => setAuthPassword(e.target.value)}
            autoComplete={authTab === "create" ? "new-password" : "current-password"}
            minLength={authTab === "create" ? 8 : undefined}
          />
        </div>
        {authTab === "create" && (
          <div className="space-y-2">
            <Label htmlFor="userTimezone">Timezone</Label>
            <TimezoneSelect
              value={userTimezone}
              onChange={setUserTimezone}
              name="userTimezone"
            />
          </div>
        )}
      </div>

      {authTab === "create" && (
        <p className="text-xs text-muted-foreground mt-2">
          By creating an account you agree to the{" "}
          <a href="/terms" className="underline">Terms of Service</a> and{" "}
          <a href="/privacy" className="underline">Privacy Policy</a>.
        </p>
      )}
    </div>
  );
}