interface StepProgressProps {
    current: number;
    total: number;
}

function StepProgress({ current, total }: StepProgressProps) {
    const safeTotal = Math.max(total, 1);
    const clampedCurrent = Math.min(Math.max(current, 0), safeTotal - 1);
    const percentage = ((clampedCurrent + 1) / safeTotal) * 100;

    return (
        <div style={{ display: "grid", gap: "6px", width: "100%" }}>
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between",
                    fontSize: "12px",
                    color: "var(--text-dim)",
                }}
            >
                <span>Step Progress</span>
                <span>
                    {clampedCurrent + 1}/{safeTotal}
                </span>
            </div>
            <div
                style={{
                    height: "6px",
                    borderRadius: "999px",
                    background: "rgba(255,255,255,0.1)",
                    overflow: "hidden",
                }}
            >
                <div
                    style={{
                        width: `${percentage}%`,
                        height: "100%",
                        background: "linear-gradient(90deg, #60a5fa, #3b82f6)",
                        transition: "width 0.2s ease",
                    }}
                />
            </div>
        </div>
    );
}

export default StepProgress;