import { jsx, jsxs } from 'react/jsx-runtime';
import { AnimatePresence, motion } from 'motion/react';
import { cn } from '../../../../utils/cn.js';
import { chartCrosshairTheme } from './ChartCrosshair.theme.js';

/**
 * ChartCrosshair component for rendering crosshair lines in charts
 * Supports both vertical and horizontal lines with smooth Framer Motion transitions
 */
const ChartCrosshair = ({ show, x, y, margin, innerWidth, innerHeight, showHorizontal = false, strokeColor = "#6b7280", strokeWidth = 1, strokeDasharray = "4 4", opacity = 0.4, className, }) => {
    const theme = chartCrosshairTheme;
    const baseClasses = cn(theme.baseStyle, className);
    return (jsx(AnimatePresence, { children: show && (jsxs(motion.g, { className: "chart-crosshair", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                duration: 0.3,
                ease: "easeInOut"
            }, children: [jsx(motion.line, { x1: x, y1: margin.top, x2: x, y2: margin.top + innerHeight, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.verticalLine), animate: {
                        x1: x,
                        x2: x
                    }, transition: {
                        duration: 0.2,
                        ease: "easeOut"
                    } }), showHorizontal && y !== undefined && (jsx(motion.line, { x1: margin.left, y1: y, x2: margin.left + innerWidth, y2: y, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray, opacity: opacity, className: cn(baseClasses, theme.horizontalLine), animate: {
                        y1: y,
                        y2: y
                    }, transition: {
                        duration: 0.2,
                        ease: "easeOut"
                    } }))] })) }));
};

export { ChartCrosshair };
