---
export interface Props {
	background?: 'white' | 'gray' | 'primary' | 'gradient';
	spacing?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
	class?: string;
}

const { background = 'white', spacing = 'large', class: className = '', ...rest } = Astro.props;

const backgrounds = {
	white: '', // Inherit from body
	gray: '', // Inherit from body
	primary: '', // Inherit from body
	gradient: 'bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800',
};

const spacings = {
	none: '',
	small: 'py-8 md:py-12',
	medium: 'py-12 md:py-16',
	large: 'py-16 md:py-24',
	xlarge: 'py-24 md:py-32',
};

const classes = `${backgrounds[background]} ${spacings[spacing]} ${className}`;
---

<section class={classes} {...rest}>
	<slot />
</section>
