yx-react-template/src/components/course-interactions/guide-spotlight/DefaultGuideSpotlightPanel.tsx

import { Button } from "@/components/ui/button";
import styles from "./GuideSpotlight.module.css";
import type { GuideSpotlightRenderState } from "./GuideSpotlight.types";

export interface DefaultGuideSpotlightPanelProps {
	spotlight: GuideSpotlightRenderState;
}

export function DefaultGuideSpotlightPanel({
	spotlight,
}: DefaultGuideSpotlightPanelProps) {
	const { step, progress, status, actions, labels } = spotlight;

	return (
		<>
			{step.title && <h2 className={styles.title}>{step.title}</h2>}
			{step.description && (
				<div className={styles.description}>{step.description}</div>
			)}

			<div className={styles.footer}>
				<span className={styles.counter}>
					{progress.current} / {progress.total}
				</span>
				<div className={styles.actions}>
					<Button variant="ghost" size="sm" onClick={actions.skip}>
						{labels.skip}
					</Button>
					{!status.isFirst && (
						<Button variant="secondary" size="sm" onClick={actions.prev}>
							{labels.prev}
						</Button>
					)}
					<Button size="sm" onClick={actions.primary}>
						{labels.primary}
					</Button>
				</div>
			</div>
		</>
	);
}