---
import Icon from './Icon.astro'

interface Props {
  text?: string
  top?: boolean
  color?: string
}

const { text, top, color } = Astro.props

const classes = ['ribbon', top && 'ribbon-top', color && `bg-${color}`]
---

<div class:list={classes}>
  {text ? text : <Icon name="star" />}
</div>