"use client";

import Link from "next/link";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { LoginButton, RegisterButton, LogoutButton } from "./authButtons";

export function Header() {
  const { user, isLoading } = useKindeBrowserClient();

  if (isLoading) {
    return (
      <header className="border-b border-gray-200 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center">
              <Link href="/" className="flex items-center">
                <img
                  src="/vtorio.svg"
                  alt="vtor.io"
                  className="h-8 w-auto"
                />
              </Link>
            </div>
            <div className="flex items-center space-x-4">
              <div className="h-10 w-20 bg-gray-200 rounded animate-pulse"></div>
            </div>
        </div>
      </div>
    </header>
    );
  }

  return (
    <header className="border-b border-gray-200 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          <div className="flex items-center">
            <Link href="/" className="flex items-center">
              <img
                src="/vtorio.svg"
                alt="vtor.io"
                className="h-8 w-auto"
              />
            </Link>
          </div>
          <div className="flex items-center space-x-4">
            {!user ? (
              <>
                <LoginButton />
                <RegisterButton />
              </>
            ) : (
              <LogoutButton />
            )}
          </div>
        </div>
      </div>
    </header>
  );
}