---
export interface Props {
	variant?: 'default' | 'bordered' | 'elevated';
	padding?: 'none' | 'small' | 'medium' | 'large';
	class?: string;
}

const { variant = 'default', padding = 'medium', class: className = '', ...rest } = Astro.props;

const baseStyles =
	'bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm rounded-lg transition-all duration-200';

const variants = {
	default: '',
	bordered: 'border border-gray-200 dark:border-gray-700',
	elevated: 'shadow-lg hover:shadow-xl dark:shadow-gray-950/50',
};

const paddings = {
	none: '',
	small: 'p-4',
	medium: 'p-6',
	large: 'p-8',
};

const classes = `${baseStyles} ${variants[variant]} ${paddings[padding]} ${className}`;
---

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