---
export interface Props {
	as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
	size?: '1' | '2' | '3' | '4' | '5' | '6';
	weight?: 'normal' | 'medium' | 'semibold' | 'bold';
	align?: 'left' | 'center' | 'right';
	class?: string;
}

const {
	as = 'h2',
	size,
	weight = 'bold',
	align = 'left',
	class: className = '',
	...rest
} = Astro.props;

const Tag = as;
const headingSize = size || as.replace('h', '');

const sizes = {
	'1': 'text-4xl md:text-5xl lg:text-6xl',
	'2': 'text-3xl md:text-4xl lg:text-5xl',
	'3': 'text-2xl md:text-3xl lg:text-4xl',
	'4': 'text-xl md:text-2xl lg:text-3xl',
	'5': 'text-lg md:text-xl lg:text-2xl',
	'6': 'text-base md:text-lg lg:text-xl',
};

const weights = {
	normal: 'font-normal',
	medium: 'font-medium',
	semibold: 'font-semibold',
	bold: 'font-bold',
};

const alignments = {
	left: 'text-left',
	center: 'text-center',
	right: 'text-right',
};

const classes = `text-gray-900 dark:text-gray-100 ${sizes[headingSize]} ${weights[weight]} ${alignments[align]} ${className}`;
---

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