'use client'

import { motion } from 'framer-motion'

interface CategoryOverlayProps {
  hotspot: {
    label: string
    description: string
  }
}

export default function CategoryOverlay({ hotspot }: CategoryOverlayProps) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
      transition={{ duration: 0.2 }}
      className="absolute bottom-16 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
    >
      <div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl px-8 py-6 max-w-md">
        <h3 className="text-2xl font-bold text-blue-950 mb-2">{hotspot.label}</h3>
        <p className="text-gray-700">{hotspot.description}</p>
      </div>
    </motion.div>
  )
}