import { motion } from "motion/react";
import { spring } from "motion";

const variants = {
  resting: {
    y: "0%"
  },
  hover: {
    y: "-100%"
  }
};

const HoverButton = ({ text }) => {
  return (
    <motion.button 
      variants={{
        resting: {
          transition: {
            staggerChildren: 0.01,
            staggerDirection: -1
          },
          scale: 1
        },
        hover: {
          transition: {
            staggerChildren: 0.01,
            staggerDirection: 1
          },
          scale: 0.98
        }
      }}
      transition={{
        type: "spring",
        bounce: 0.25
      }}
      initial="resting"
      animate="resting"
      whileHover="hover">
      <span className="visually-hidden">{text}</span>
      <div className="letter-wrapper" aria-hidden>
        {text.split('').map((letter, index) => (
          <motion.span 
            transition={{
              type: "spring",
              bounce: 0.25
            }} 
            className="letter" variants={variants} key={index}>{letter}</motion.span>
        ))}
      </div>
    </motion.button>
  )
}

const HoverButtonCSS = ({ text, className }) => {
  return (
    <button 
      className={`stagger-button ${className}`}>
      <span className="visually-hidden">{text}</span>
      <div className="letter-wrapper" aria-hidden>
        {text.split('').map((letter, index) => (
          <motion.span style={{"--index": index}} className="letter" variants={variants} key={index}>{letter}</motion.span>
        ))}
      </div>
    </button>
  )
}

export const App = () => {
  return (
    <>
      <div 
        className="grid min-h-dvh place-items-center text-white">
        <div className="flex flex-col gap-3">
          <HoverButton text="Teaching you the" />
          <HoverButton text="craft of frontend" />
  
        </div>
      </div>
    </>
  );
}