"use client"

import { signOut, useSession } from "@/lib/auth-client"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import { toast } from "sonner"

export default function SignIn() {
  const { data: session, isPending } = useSession()
  const router = useRouter()

  const handleSignOut = async () => {
    try {
      await signOut()
      router.push("/")
    } catch (error) {
      toast.error("Failed to sign out. Please try again.")
    }
  }

  if (isPending) {
    return <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>
  }

  if (session?.user) {
    return (
      <div className="flex items-center gap-4">
        <Button onClick={handleSignOut} variant="ghost" size="default">
          Sign Out
        </Button>
      </div>
    )
  }

  return (
    <Button
      onClick={() => router.push("/auth/signin")}
      variant="outline"
      size="default"
    >
      Sign In
    </Button>
  )
}