<template>
  <div
    v-if="error"
    class="flex items-center gap-3 px-4 py-2 bg-red-50 border-t border-red-200 text-red-600 text-sm"
  >
    <RiErrorWarningLine size="16px" />
    <span class="flex-1">{{ error }}</span>
    <button class="text-xs font-medium hover:underline" @click="emit('dismiss')">
      关闭
    </button>
  </div>
</template>

<script setup lang="ts">
import { RiErrorWarningLine } from '@remixicon/vue'

interface Props {
  error?: string
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'dismiss'): void
}>()
</script>
