import { Children, type ReactNode } from 'react'
import { cn } from '@/lib/utils'

interface StaggerListProps {
  children: ReactNode
  className?: string
  /** Base delay before the first item animates (ms). Default: 0 */
  baseDelay?: number
  /** Delay increment between each item (ms). Default: 50 */
  staggerMs?: number
}

/**
 * Wraps each child in a stagger-item animation container.
 * Children fade in sequentially with a configurable delay.
 *
 * Usage:
 *   <StaggerList className="grid grid-cols-3 gap-4">
 *     {items.map(item => <Card key={item.id} ... />)}
 *   </StaggerList>
 */
export function StaggerList({
  children,
  className,
  baseDelay = 0,
  staggerMs = 50,
}: StaggerListProps) {
  const items = Children.toArray(children)

  return (
    <div className={cn(className)}>
      {items.map((child, i) => (
        <div
          key={i}
          className="stagger-item"
          style={{ '--stagger-index': i, animationDelay: `${baseDelay + i * staggerMs}ms` } as React.CSSProperties}
        >
          {child}
        </div>
      ))}
    </div>
  )
}
