<script setup lang="ts">
import { type PastelProps, color } from '~/composables/color'
import { type AlignmentProps, align } from '~/composables/alignment'

export type Props = PastelProps & AlignmentProps

const props = defineProps<Props>()
</script>

<template>
  <div
    class="funkwhale alert"
    role="alert"
    v-bind="{
      ...$attrs,
      ...color(props, ['solid'])(
         align(props)(
    ))}"
  >
    <slot />

    <div v-if="$slots.actions" class="actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<style lang="scss">
@import './alert.scss'
</style>
