// Steps — numbered vertical list for tutorials / install guides.
// Renders children as a column with a connecting line on the left
// and an auto-incrementing badge for each direct child.
//
// Usage:
//   <Steps>
//     <Step title="Install the CLI">
//       <CodeBlock code="pnpm add -g voltro" />
//     </Step>
//     <Step title="Create a project">
//       …
//     </Step>
//   </Steps>

import { Children, isValidElement, type ReactNode } from 'react'
import { cn } from '../cn'

interface StepsProps {
  readonly children: ReactNode
  readonly className?: string
}

interface StepProps {
  readonly title?: ReactNode
  readonly children: ReactNode
  readonly className?: string
}

export const Steps = ({ children, className }: StepsProps): ReactNode => {
  // Inject 1-based index into each <Step> via a positional prop. We
  // could clone with React.cloneElement, but a CSS counter is simpler
  // + survives Suspense boundaries.
  const items = Children.toArray(children).filter(isValidElement)
  return (
    <ol className={cn('not-prose my-6 ml-3 space-y-6 border-l border-border', className)}>
      {items.map((child, i) => (
        <li key={i} className="relative pl-8">
          <div className="absolute left-0 top-0 -translate-x-1/2 w-6 h-6 rounded-full bg-card border border-border text-xs font-semibold text-foreground inline-flex items-center justify-center">
            {i + 1}
          </div>
          {child}
        </li>
      ))}
    </ol>
  )
}

export const Step = ({ title, children, className }: StepProps): ReactNode => (
  <div className={cn('-mt-1', className)}>
    {title ? <h3 className="text-base font-semibold text-foreground mb-2">{title}</h3> : null}
    <div className="text-sm text-muted-foreground leading-relaxed space-y-2">
      {children}
    </div>
  </div>
)