---
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>