import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

/**
 * Numbered vertical steps for instructions and guides — CSS counters draw
 * the badges, a hairline rail connects them. Content is free-form.
 */
export function Steps({
  className,
  children,
}: {
  className?: string;
  children: ReactNode;
}) {
  return (
    <div
      data-slot="steps"
      className={cn(
        "relative ml-3 pl-6 [counter-reset:step] [&>*]:relative before:absolute before:top-2 before:bottom-2 before:left-0 before:w-px before:bg-ink-wash",
        className,
      )}
    >
      {children}
    </div>
  );
}

export function Step({
  title,
  className,
  children,
}: {
  /** Optional bold lead line. */
  title?: ReactNode;
  className?: string;
  children?: ReactNode;
}) {
  return (
    <div
      data-slot="step"
      className={cn(
        "mb-6 [counter-increment:step] before:absolute before:-left-[2.1rem] before:flex before:size-6 before:items-center before:justify-center before:rounded-full before:bg-ink-wash before:text-xs before:font-medium before:text-ink-700 before:[content:counter(step)]",
        className,
      )}
    >
      {title ? (
        <div className="mb-1 font-semibold text-ink-900">{title}</div>
      ) : null}
      {children}
    </div>
  );
}