import { Children, cloneElement, isValidElement, type ReactNode } from "react";

interface StepProps {
  number?: number;
  title: string;
  children: ReactNode;
}

export function Step({ number, title, children }: StepProps) {
  return (
    <div className="mb-10">
      <div className="flex items-center gap-3 mb-5">
        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-accent-hover/15 border border-accent-hover/25 text-accent-text text-xs font-bold shrink-0 select-none">
          {number ?? "·"}
        </div>
        <h3 className="text-sm font-semibold text-white tracking-tight leading-snug">
          {number ? `STEP ${number}` : "STEP"} — {title}
        </h3>
      </div>
      <div className="ml-10 pl-4 border-l border-border/80 space-y-3 text-content-dim text-sm leading-relaxed">
        {children}
      </div>
    </div>
  );
}

export function Steps({ children }: { children: ReactNode }) {
  const items = Children.toArray(children).filter(isValidElement);
  return (
    <div className="my-6 space-y-1">
      {items.map((child, index) =>
        cloneElement(child as React.ReactElement<StepProps>, {
          number: (child.props as StepProps).number ?? index + 1,
        })
      )}
    </div>
  );
}