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

interface Props {
  text?: string
  top?: boolean
  left?: boolean
  bottom?: boolean
  bookmark?: boolean
  color?: string
  filled?: boolean
}

const { text, top, left, bottom, bookmark, color, filled } = Astro.props

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

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