---
export interface Props {
	as?: 'p' | 'span' | 'div';
	size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
	color?: 'default' | 'muted' | 'primary' | 'error';
	weight?: 'normal' | 'medium' | 'semibold' | 'bold';
	align?: 'left' | 'center' | 'right' | 'justify';
	class?: string;
}

const {
	as = 'p',
	size = 'base',
	color = 'default',
	weight = 'normal',
	align = 'left',
	class: className = '',
	...rest
} = Astro.props;

const Tag = as;

const sizes = {
	xs: 'text-xs',
	sm: 'text-sm',
	base: 'text-base',
	lg: 'text-lg',
	xl: 'text-xl',
};

const colors = {
	default: 'text-gray-900 dark:text-gray-100',
	muted: 'text-gray-600 dark:text-gray-400',
	primary: 'text-blue-600 dark:text-blue-400',
	error: 'text-red-600 dark:text-red-400',
};

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',
	justify: 'text-justify',
};

const classes = `${sizes[size]} ${colors[color]} ${weights[weight]} ${alignments[align]} ${className}`;
---

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