"use client";

import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import Link from "next/link";

export function LoginButton() {
  return (
    <Link
      href="/api/auth/login"
      className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
    >
      Login
    </Link>
  );
}

export function LogoutButton() {
  const { user } = useKindeBrowserClient();
  
  if (!user) return null;
  
  return (
    <Link
      href="/api/auth/logout"
      className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
    >
      Logout
    </Link>
  );
}

export function RegisterButton() {
  return (
    <Link
      href="/api/auth/register"
      className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
    >
      Register
    </Link>
  );
}

export function UserInfo() {
  const { user, isLoading } = useKindeBrowserClient();
  
  if (isLoading) return <div>Loading...</div>;
  
  if (!user) return null;
  
  return (
    <div className="text-sm text-center sm:text-left">
      <p>Welcome, {user.given_name || user.email}!</p>
    </div>
  );
}