---
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'section'> {
	maxWidth?: 'none' | String
	colReverse?: boolean
	wrapperClass?: string
	wFull?: boolean
	hFull?: boolean
}

const {
	maxWidth = '1024px',
	colReverse = true,
	wrapperClass = '',
	wFull = true,
	hFull = false,
	...props
} = Astro.props;

const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');

const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-center lg:justify-between'}
	${colReverse ? 'flex-col-reverse' : 'flex-col'} lg:flex-row items-center`;

const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 xl:px-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
---

<section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
	<div class={className} {...props}>
		{twoColumn
			? (
				<div class="flex flex-col items-center text-center w-full md:w-auto md:items-start md:text-left relative">
					<slot name="left"></slot>
				</div>

				<div class="flex flex-col items-center text-center w-full md:w-auto md:items-start md:text-left relative">
					<slot name="right"></slot>
				</div>
			)
			: (
				<slot></slot>
			)}
	</div>
</section>