<script setup lang="ts">
import { ErrorMessage } from 'vee-validate'
import { cn } from '~/lib/utils'

const props = defineProps<{
  name: string
  class?: string
}>()
</script>

<template>
  <ErrorMessage
    :name="props.name"
    v-slot="{ message }"
  >
    <p :class="cn('font-sans text-[0.8rem] text-destructive', props.class)">
      {{ message }}
    </p>
  </ErrorMessage>
</template>
