import { HelpCircle } from 'lucide-react';
import { type ReactNode } from 'react';
import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
interface ContextualHelpProps {
children: ReactNode;
}
/**
* Small (?) icon that shows a plain-English explanation popover on click.
* Place next to metric labels or jargon terms.
*/
export default function ContextualHelp({ children }: ContextualHelpProps) {
return (
{children}
);
}
// ── Spotlight Tour ────────────────────────────────────────────────────────────
interface SpotlightTipProps {
/** 1-based current step number */
step: number;
totalSteps: number;
title: string;
description: string;
/** Called when the user advances to the next step or clicks "Done" on the last step */
onNext: () => void;
/** Called when the user clicks "Skip tour" */
onSkip: () => void;
/** Whether this is the last step (renders "Done" instead of "Next →") */
isLast: boolean;
}
/**
* Fixed bottom-center tour step card for sequential product onboarding.
* Used by RecommendationsFirstVisitTour. Each step explains a UI feature
* without requiring real DOM-element spotlight refs.
*
* ACT-005: First-visit tour for the recommendations page.
*/
export function SpotlightTip({
step,
totalSteps,
title,
description,
onNext,
onSkip,
isLast,
}: SpotlightTipProps) {
return (