/**
 * Onboarding Progress Bar & Step Progress Animations
 *
 * IMPORTANT: These values are COPIED VERBATIM from the original components.
 * DO NOT MODIFY WITHOUT APPROVAL.
 */

import type React from "react";

// =============================================================================
// FILE UPLOAD PROGRESS BAR
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/file-upload-step.tsx:550-556
 * Progress bar fill animation for file uploads
 */
export const FILE_UPLOAD_PROGRESS = {
	/** Container for the progress bar */
	container: "mt-1.5 h-1 overflow-hidden rounded-full bg-muted",

	/** The fill bar that animates */
	bar: "h-full bg-primary transition-all duration-200",
};

/**
 * Generate progress bar fill style
 * COPIED VERBATIM FROM: components/onboarding/steps/file-upload-step.tsx:553
 */
export function getProgressStyle(progress: number): React.CSSProperties {
	return {
		width: `${progress}%`,
	};
}

// =============================================================================
// STEP PROGRESS INDICATOR
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:93
 * Header height transition on scroll
 */
export const HEADER_TRANSITION = {
	/** Base transition class for header height changes */
	className: "transition-all",

	/** Heights for different states */
	heights: {
		expanded: "h-20",
		collapsed: "h-12",
	},
};

// =============================================================================
// PROGRESS STEP INDICATOR
// =============================================================================

/**
 * Step progress indicator states
 * Used for the step dots/indicators in the header
 */
export const STEP_INDICATOR = {
	/** Completed step styling */
	completed: "bg-primary",

	/** Current step styling */
	current: "bg-primary ring-2 ring-primary ring-offset-2",

	/** Upcoming step styling */
	upcoming: "bg-muted",

	/** Connector line between steps */
	connector: "h-0.5 bg-muted",
	connectorCompleted: "h-0.5 bg-primary",
};