import React from 'react';
import { motion } from 'framer-motion';
import '../styles/animations.css';

function DataPoint({ color, sentiment, priority, onClick }) {
    // Size based on priority
    const sizeMap = {
        critical: 24,
        high: 20,
        medium: 16,
        low: 14
    };

    const size = sizeMap[priority] || 16;

    return (
        <motion.div
            initial={{ scale: 0, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
            className="data-point-marker animate-glow"
            style={{
                width: `${size}px`,
                height: `${size}px`,
                backgroundColor: color,
                border: `2px solid ${color}`,
                boxShadow: `
          0 0 12px ${color}cc,
          0 0 24px ${color}66,
          inset 0 0 8px rgba(255, 255, 255, 0.3)
        `,
                cursor: 'pointer'
            }}
            onClick={onClick}
            whileHover={{
                scale: 1.3,
                boxShadow: `
          0 0 20px ${color}ff,
          0 0 40px ${color}99,
          0 0 60px ${color}66,
          inset 0 0 12px rgba(255, 255, 255, 0.5)
        `
            }}
            whileTap={{ scale: 0.9 }}
        >
            {/* Inner glow */}
            <div style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: '60%',
                height: '60%',
                borderRadius: '50%',
                backgroundColor: 'rgba(255, 255, 255, 0.4)',
                filter: 'blur(2px)'
            }} />

            {/* Ripple effect for critical news */}
            {priority === 'critical' && (
                <motion.div
                    style={{
                        position: 'absolute',
                        top: '-4px',
                        left: '-4px',
                        right: '-4px',
                        bottom: '-4px',
                        borderRadius: '50%',
                        border: `2px solid ${color}`,
                        opacity: 0.6
                    }}
                    animate={{
                        scale: [1, 1.8, 1],
                        opacity: [0.6, 0, 0.6]
                    }}
                    transition={{
                        duration: 1.5,
                        repeat: Infinity,
                        ease: 'easeOut'
                    }}
                />
            )}
        </motion.div>
    );
}

export default DataPoint;