<template>
  <UiButton
    :class="[cn.b(), cn.has('one', count === 1), cn.has('few', count > 1)]"
    :icon="icon"
    type="ghost"
    color="secondary"
    :data-count="countContent"
  />
</template>

<script setup>
const props = defineProps({ icon: { type: String }, count: { type: Number } })

const cn = useClassname('notify-button')

const countContent = computed(() => {
  return props.count > 9 ? '9+' : props.count
})
</script>

<style lang="scss">
.notify-button {
  position: relative;

  &::after {
    @include txt-s-m;

    display: block;
    position: absolute;
    background-color: $clr-red-500;
    color: $clr-white;
  }

  &.has-one {
    &::after {
      content: '';

      width: 6px;
      height: 6px;
      border-radius: 3px;
      top: 7px;
      right: 7px;
    }
  }

  &.has-few {
    &::after {
      content: attr(data-count);

      top: 0px;
      right: 0px;
      padding-inline: 4px;
      border-radius: 7px;
    }
  }
}
</style>
