---
interface Props {
	text?: string;
	position?: string;
	color?: string;
	class?: string;
}

const { text = 'Label', position, color, class: className } = Astro.props;

const classes = [
	'hr-text',
	position && `hr-text-${position.toLowerCase()}`,
	color && `text-${color}`,
	className,
]
---

<div class:list={classes}>{text}</div>