import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../../utils/cn.js';
import { ChartText } from '../ChartText/ChartText.js';

/**
 * XAxis component for charts
 * Renders horizontal axis with labels and optional tick marks
 */
const XAxis = React__default.memo(({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
    if (!show)
        return null;
    const formatLabel = (item, index) => {
        if (labelFormatter) {
            return labelFormatter(item, index);
        }
        return item.name || item.label || String(index);
    };
    const getTickX = (index) => {
        if (alignWithEdge) {
            if (data.length <= 1) {
                return x + width / 2;
            }
            const relativeIndex = index / (data.length - 1);
            return x + relativeIndex * width;
        }
        return x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
    };
    return (jsxs("g", { className: cn("chart-x-axis", className), children: [jsx("line", { x1: x, y1: y, x2: x + width, y2: y, className: "stroke-[var(--color-border)]", strokeWidth: 1 }), data.map((item, index) => {
                const tickX = getTickX(index);
                const label = formatLabel(item, index);
                return (jsxs("g", { children: [showTicks && (jsx("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, className: "stroke-[var(--color-border)]", strokeWidth: 1 })), jsx(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, rotation: labelRotation, children: label })] }, index));
            })] }));
});

export { XAxis };
