"use client";

import { SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
import { useAuth } from "@clerk/nextjs";
import Link from "next/link";

export default function NavAuth() {
  const { isSignedIn } = useAuth();

  if (isSignedIn) {
    return <UserButton />;
  }

  return (
    <div className="flex items-center gap-3">
      <SignInButton mode="redirect" fallbackRedirectUrl="/dashboard">
        <button className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-700 transition-colors hover:bg-stone-50">
          Sign In
        </button>
      </SignInButton>
      <SignUpButton mode="redirect" fallbackRedirectUrl="/onboarding">
        <button className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-light">
          Sign Up
        </button>
      </SignUpButton>
    </div>
  );
}

export function LandingAuth() {
  const { isSignedIn } = useAuth();

  if (isSignedIn) {
    return (
      <Link
        href="/dashboard"
        className="rounded-lg bg-primary px-8 py-3 text-base font-medium text-white transition-colors hover:bg-primary-light"
      >
        Go to Dashboard
      </Link>
    );
  }

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
      <SignInButton mode="redirect" fallbackRedirectUrl="/dashboard">
        <button className="rounded-lg border border-stone-200 px-8 py-3 text-base font-medium text-stone-700 transition-colors hover:bg-stone-50">
          Sign In
        </button>
      </SignInButton>
      <SignUpButton mode="redirect" fallbackRedirectUrl="/onboarding">
        <button className="rounded-lg bg-primary px-8 py-3 text-base font-medium text-white transition-colors hover:bg-primary-light">
          Get Started
        </button>
      </SignUpButton>
    </div>
  );
}