import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { CheckIcon } from '@heroicons/react/24/solid';
import { cn } from '../../../utils/cn.js';
import { useTimelineContext } from './Timeline.js';
import { useTimelineItemContext } from './TimelineItem.js';
import { timelineMarkerVariants } from './Timeline.animations.js';

const TimelineMarker = React__default.forwardRef(({ icon, className, ...props }, ref) => {
    const { theme, layout } = useTimelineContext();
    const { status, isLast } = useTimelineItemContext();
    const shouldReduceMotion = useReducedMotion();
    // Determine the icon to render
    const renderIcon = () => {
        if (icon)
            return icon;
        if (status === "completed") {
            return jsx(CheckIcon, { className: "w-4 h-4" });
        }
        if (status === "active") {
            return jsx("span", { className: "w-2 h-2 rounded-full bg-white" });
        }
        // Pending: small neutral dot
        return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-text-muted)]" }));
    };
    const isHorizontal = layout === "horizontal";
    const variants = shouldReduceMotion ? undefined : timelineMarkerVariants;
    // Filter out conflicting motion props
    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "w-full"), children: [jsx(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, "aria-label": `${status} step`, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: renderIcon() }), !isLast && !isHorizontal && (jsx("div", { className: cn("w-0.5 flex-1 min-h-4", status === "completed"
                    ? "bg-[var(--color-success)]"
                    : "bg-[var(--color-border)]"), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 left-1/2 h-0.5 w-full", status === "completed"
                    ? "bg-[var(--color-success)]"
                    : "bg-[var(--color-border)]"), "aria-hidden": "true" }))] }));
});
TimelineMarker.displayName = "TimelineMarker";

export { TimelineMarker };
