<script setup lang="ts">
withDefaults(
  defineProps<{
    tone?: 'pink' | 'mint' | 'cream'
    rotate?: string
    widthClass?: string
  }>(),
  {
    tone: 'pink',
    rotate: '-rotate-3',
    widthClass: 'w-24',
  },
)

const toneClass = {
  pink: 'bg-tape-pink/75',
  mint: 'bg-tape-mint/75',
  cream: 'bg-tape-cream/80',
}
</script>

<template>
  <div
    class="pointer-events-none absolute z-10 h-7 rounded-sm shadow-sm mix-blend-multiply ring-1 ring-ink/5"
    :class="[toneClass[tone], rotate, widthClass]"
    aria-hidden="true"
  />
</template>
