/**
 * Central spacing configuration for consistent layout across the app
 *
 * Usage:
 * ```tsx
 * import { spacing } from '~/utils/spacing';
 *
 * <View style={{ padding: spacing.container.horizontal, marginBottom: spacing.section }}>
 * ```
 */

export const spacing = {
	// Base spacing units (multiples of 4)
	xs: 4,
	sm: 8,
	md: 12,
	lg: 16,
	xl: 24,
	xxl: 32,
	xxxl: 48,

	// Container spacing (standard padding for screen containers)
	container: {
		horizontal: 16,
		vertical: 24,
		top: 24, // Top padding after PageHeader
		bottom: 24, // Bottom padding before tab bar
	},

	// Section spacing (between major sections/cards)
	section: 24,

	// Card spacing
	card: {
		gap: 24, // Gap between cards
		padding: 16, // Internal padding (maps to "lg" in Card component)
	},

	// Content spacing
	content: {
		title: 16, // Space after section titles
		item: 16, // Space between list items
		small: 12, // Small spacing between related elements
		micro: 8, // Very small spacing
	},

	// Layout specific
	header: {
		paddingBottom: 16,
	},

	tabBar: {
		clearance: 100, // Bottom padding to clear tab bar
	},
} as const;

// Type for spacing values
export type Spacing = typeof spacing;

/**
 * Hook to access spacing values
 * Future: Could be extended to provide different spacing scales per theme
 */
export function useSpacing() {
	return spacing;
}
