<script setup lang="ts">
import type { mastodon } from 'masto'

defineProps<{
  account: mastodon.v1.Account
  limit?: number
}>()
</script>

<template>
  <div
    flex="~ gap1" items-center
    class="border border-base rounded-md px-1"
    text-secondary-light
  >
    <slot name="prepend" />
    <div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
      <div :style="`color: ${role.color}; border-color: ${role.color}`">
        {{ role.name }}
      </div>
    </div>
  </div>
  <div
    v-if="limit && account.roles?.length > limit"
    flex="~ gap1" items-center
    class="border border-base rounded-md px-1"
    text-secondary-light
  >
    +{{ account.roles?.length - limit }}
  </div>
</template>