/**
 * Onboarding Selection & Interaction Feedback Animations
 *
 * IMPORTANT: These values are COPIED VERBATIM from the original components.
 * DO NOT MODIFY WITHOUT APPROVAL.
 */

import type React from "react";

// =============================================================================
// CONDITIONAL REVEAL ANIMATIONS
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/card-grid-step.tsx:194-197
 * Used when a card with dropdown is selected
 */
export const CONDITIONAL_DROPDOWN = {
	className:
		"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2",
	style: {
		animationDuration: "200ms",
	} as React.CSSProperties,
};

// =============================================================================
// SELECT DROPDOWN ANIMATIONS (Radix-based)
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-select.tsx:83-85
 * Radix UI Select content animation classes
 */
export const SELECT_CONTENT_CLASSES = {
	/** Animation when closing */
	closed: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",

	/** Animation when opening from bottom */
	openFromBottom:
		"data-[side=bottom]:animate-in data-[side=bottom]:fade-in-0 data-[side=bottom]:slide-in-from-top-2",

	/** Animation when opening from top */
	openFromTop:
		"data-[side=top]:animate-in data-[side=top]:fade-in-0 data-[side=top]:slide-in-from-bottom-2",
};

/**
 * Combined select content animation classes
 */
export const SELECT_ANIMATION_CLASSES = [
	SELECT_CONTENT_CLASSES.closed,
	SELECT_CONTENT_CLASSES.openFromBottom,
	SELECT_CONTENT_CLASSES.openFromTop,
].join(" ");

// =============================================================================
// CARD SELECTION FEEDBACK
// =============================================================================

/**
 * Card press/active state
 * Common pattern used across selectable cards
 */
export const CARD_PRESS_CLASSES = {
	/** Scale down slightly on active/press */
	active: "active:scale-[99%]",

	/** Smooth transition for all properties */
	transition: "transition-all",
};

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

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/file-upload-step.tsx:550-556
 * Progress bar animation classes
 */
export const PROGRESS_BAR = {
	className: "h-full bg-primary transition-all duration-200",
};