import { jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { cn } from '../../../../utils/cn.js';
import { chartMarkerTheme } from './ChartMarker.theme.js';

/**
 * ChartMarker component for rendering circular data point markers in charts
 * Supports hover scaling with React state for reliable SVG interactions
 */
const ChartMarker = ({ cx, cy, radius, colorClass, className, strokeWidth = 2, fillColor, strokeColor, }) => {
    const theme = chartMarkerTheme;
    const [isHovered, setIsHovered] = useState(false);
    const baseClasses = cn(theme.baseStyle, colorClass, className);
    // Calculate hover radius
    const currentRadius = isHovered ? radius * 1.1 : radius;
    return (jsx("g", { className: "chart-marker", children: jsx("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", stroke: strokeColor, strokeWidth: strokeWidth, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
                transition: 'linear 0.2s ease-out',
                cursor: 'pointer'
            } }) }));
};

export { ChartMarker };
