'use client'

import { motion } from 'framer-motion'

interface ProgressiveTextProps {
  texts: string[]
  className?: string
}

export function ProgressiveText({ texts, className }: ProgressiveTextProps) {
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
    }),
  }

  const child = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  }

  return (
    <motion.div
      className={className}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {texts.map((text, i) => (
        <motion.div key={i} variants={child} className="inline">
          {text}
          {i < texts.length - 1 && ' '}
        </motion.div>
      ))}
    </motion.div>
  )
}