---
export interface Props {
	direction?: 'row' | 'column';
	wrap?: boolean;
	align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
	justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
	gap?: 'none' | 'small' | 'medium' | 'large';
	class?: string;
}

const {
	direction = 'row',
	wrap = false,
	align = 'stretch',
	justify = 'start',
	gap = 'none',
	class: className = '',
	...rest
} = Astro.props;

const baseStyles = 'flex';

const directions = {
	row: 'flex-row',
	column: 'flex-col',
};

const alignments = {
	start: 'items-start',
	center: 'items-center',
	end: 'items-end',
	stretch: 'items-stretch',
	baseline: 'items-baseline',
};

const justifications = {
	start: 'justify-start',
	center: 'justify-center',
	end: 'justify-end',
	between: 'justify-between',
	around: 'justify-around',
	evenly: 'justify-evenly',
};

const gaps = {
	none: '',
	small: 'gap-2',
	medium: 'gap-4',
	large: 'gap-6',
};

const wrapStyle = wrap ? 'flex-wrap' : '';

const classes = `${baseStyles} ${directions[direction]} ${alignments[align]} ${justifications[justify]} ${gaps[gap]} ${wrapStyle} ${className}`;
---

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