<script lang="ts" setup>
import {MessageCircle} from 'lucide-vue-next'

defineEmits(['toggle-chat'])
</script>

<template>
  <div class="fixed bottom-6 right-6 z-50">
    <button
      @click="$emit('toggle-chat')"
      class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all transform hover:scale-110 flex items-center justify-center"
    >
      <MessageCircle class="w-8 h-8" />
    </button>
    
    <!-- Notification Badge -->
    <div class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white text-xs rounded-full flex items-center justify-center animate-pulse">
      1
    </div>
  </div>
</template>

