"use client";

import Link from "next/link";
import { signIn, signOut, useSession } from "next-auth/react";

import { Button } from "@/components/ui/button";

export function AuthButtons() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return (
      <Button variant="outline" size="sm" disabled>
        Loading...
      </Button>
    );
  }

  if (!session?.user) {
    return (
      <Button onClick={() => signIn("google")} className="bg-emerald-700 hover:bg-emerald-800">
        <span className="sm:hidden">Sign in</span>
        <span className="hidden sm:inline">Sign in with Google</span>
      </Button>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <Button asChild variant="outline" size="sm">
        <Link href="/dashboard">Dashboard</Link>
      </Button>
      <Button size="sm" onClick={() => signOut({ callbackUrl: "/" })}>
        Sign out
      </Button>
    </div>
  );
}