"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var nextjs = require('@clerk/nextjs');
var server = require('@windrun-huaiin/base-ui/components/server');
var signupButtonWithFingerprintClient = require('./signup-button-with-fingerprint-client.js');

function ClerkUserClient({ data }) {
    const [showTooltip, setShowTooltip] = React.useState(false);
    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.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" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [data.showSignUp && (jsxRuntime.jsxs("div", { className: "relative inline-flex z-10", children: [jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default", children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsxRuntime.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none", children: data.signUpBonusTooltip }))] }))] })), jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.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 }) })] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
                                elements: {
                                    userButtonAvatarBox: "w-8 h-8 border",
                                }
                            }, children: jsxRuntime.jsxs(nextjs.UserButton.MenuItems, { children: [jsxRuntime.jsx(nextjs.UserButton.Action, { label: "manageAccount" }), jsxRuntime.jsx(nextjs.UserButton.Link, { labelIcon: jsxRuntime.jsx(server.globalLucideIcons.ReceiptText, { className: "size-4 fill-none stroke-(--clerk-icon-stroke-color)" }), label: data.terms, href: `/${data.locale}/legal/terms` }), jsxRuntime.jsx(nextjs.UserButton.Link, { labelIcon: jsxRuntime.jsx(server.globalLucideIcons.ShieldUser, { className: "size-4 fill-none stroke-(--clerk-icon-stroke-color)" }), label: data.privacy, href: `/${data.locale}/legal/privacy` }), jsxRuntime.jsx(nextjs.UserButton.Action, { label: "signOut" })] }) }) })] })] }));
}

exports.ClerkUserClient = ClerkUserClient;
