"use client";
import { motion } from "framer-motion";

export function StaggeredList() {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    }
  };

  const item = {
    hidden: { opacity: 0, x: -20 },
    show: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
  };

  return (
    <div className="flex w-full h-[300px] items-center justify-center bg-[#0a0a0a] rounded-2xl border border-border p-6">
      <motion.ul 
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true }}
        className="w-full max-w-sm space-y-3"
      >
        {["Authentication", "Database", "Storage", "Edge Functions"].map((text, i) => (
          <motion.li 
            key={i} 
            variants={item}
            className="w-full rounded-xl border border-border bg-[#111] p-4 flex items-center justify-between shadow-sm"
          >
            <span className="text-sm font-medium text-foreground">{text}</span>
            <div className="h-2 w-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
}