"use client";
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { useAuth, ClerkLoading, ClerkLoaded, SignInButton, UserButton } from '@clerk/nextjs';
import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
import { themeButtonGradientClass } from '@windrun-huaiin/base-ui/lib';
import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client.mjs';

function ClerkUserClient({ data }) {
    const [showTooltip, setShowTooltip] = useState(false);
    const { isSignedIn } = useAuth();
    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [!isSignedIn && (jsxs(Fragment, { children: [data.showSignUp && (jsxs("div", { className: "relative inline-flex z-10", children: [jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxs(Fragment, { children: [jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: `absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full ${themeButtonGradientClass} px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default`, children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsx("div", { className: `absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg ${themeButtonGradientClass} border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg pointer-events-none`, children: data.signUpBonusTooltip }))] }))] })), jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) })] })), isSignedIn && (jsx(UserButton, { appearance: {
                            elements: {
                                userButtonAvatarBox: "w-8 h-8 border",
                            }
                        }, children: jsxs(UserButton.MenuItems, { children: [jsx(UserButton.Action, { label: "manageAccount" }), jsx(UserButton.Link, { labelIcon: jsx(globalLucideIcons.ReceiptText, { className: "size-4 fill-none stroke-(--clerk-icon-stroke-color)" }), label: data.terms, href: `/${data.locale}/legal/terms` }), jsx(UserButton.Link, { labelIcon: jsx(globalLucideIcons.ShieldUser, { className: "size-4 fill-none stroke-(--clerk-icon-stroke-color)" }), label: data.privacy, href: `/${data.locale}/legal/privacy` }), jsx(UserButton.Action, { label: "signOut" })] }) }))] })] }));
}

export { ClerkUserClient };
