<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  align?: 'start' | 'end' | 'center' | 'block-end'
  class?: HTMLAttributes['class']
}>()

const alignClasses = {
  start: 'justify-start',
  end: 'justify-end',
  center: 'justify-center',
  'block-end': 'justify-end items-end',
}
</script>

<template>
  <div :class="cn('flex flex-wrap items-center gap-2', alignClasses[props.align || 'start'], props.class)">
    <slot />
  </div>
</template>
