import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MessageCircle, MessageCirclePlus, PenLine } from "lucide-react";
import { CloseButton } from "../../components/ui/close-button";
import { FEEDBACK_SIDEBAR_TEXT_CLASS } from "./feedbackSidebarText";
/** An outline card that doubles as the action button for a feedback mode. */
function ModeCard({ icon, title, description, ariaLabel, onClick, }) {
    return (_jsxs("button", { type: "button", "aria-label": ariaLabel, onClick: onClick, className: "border-border-default hover:border-neutral-grey-15 hover:bg-neutral-grey-5 flex flex-1 flex-col items-start gap-1.5 rounded-md border bg-transparent p-3 text-left transition-colors", children: [_jsxs("span", { className: "text-neutral-grey-100 flex items-center gap-1.5 font-medium", children: [icon, title] }), _jsx("span", { className: "text-neutral-grey-50", children: description })] }));
}
function ModeCards({ canSuggest, onAddComment, onStartSuggesting, }) {
    return (_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(ModeCard, { icon: _jsx(MessageCirclePlus, { size: 16, strokeWidth: 1 }), title: "Add a comment", description: "Leave a note or ask a question. The page stays unchanged.", ariaLabel: "Add a comment", onClick: onAddComment }), canSuggest && (_jsx(ModeCard, { icon: _jsx(PenLine, { size: 16, strokeWidth: 1 }), title: "Activate suggestions mode", description: "Edit on the page; your changes become suggestions to apply in one click.", ariaLabel: "Activate suggestions mode", onClick: onStartSuggesting }))] }));
}
export function FeedbackModeIntro({ variant, canSuggest, onAddComment, onStartSuggesting, onDismiss, }) {
    const cards = (_jsx(ModeCards, { canSuggest: canSuggest, onAddComment: onAddComment, onStartSuggesting: onStartSuggesting }));
    if (variant === "banner") {
        return (_jsxs("div", { className: `${FEEDBACK_SIDEBAR_TEXT_CLASS} border-border-default relative flex flex-col gap-2 border-b p-3`, "data-testid": "feedback-mode-intro-banner", children: [_jsx("div", { className: "text-neutral-grey-100 pr-6 font-medium", children: "Two ways to give feedback" }), cards, onDismiss && (_jsx(CloseButton, { className: "absolute top-1.5 right-1.5", onClick: onDismiss, label: "Dismiss", "data-testid": "feedback-mode-intro-dismiss" }))] }));
    }
    return (_jsxs("div", { className: `${FEEDBACK_SIDEBAR_TEXT_CLASS} flex flex-col items-center gap-4 px-4 py-10 text-center`, "data-testid": "feedback-mode-intro-empty", children: [_jsx("span", { className: "text-neutral-grey-50", children: _jsx(MessageCircle, { size: 32, strokeWidth: 1 }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { ref: (el) => {
                            el?.style.setProperty("font-size", "24px", "important");
                            el?.style.setProperty("line-height", "1.2", "important");
                        }, className: "text-neutral-grey-100 font-medium", children: "Be the first to give feedback!" }), _jsx("div", { className: "text-neutral-grey-50", children: "There are two ways to give feedback on this page:" })] }), _jsx("div", { className: "w-full", children: cards })] }));
}
//# sourceMappingURL=FeedbackModeIntro.js.map