Animated Content

import { AnimatedContent } from "@/components/ui/animated-content";
import { SpringConfig } from "@react-spring/web";

const DemoOne = () => {
  const direction: "vertical" | "horizontal" = "vertical";
  const reverse: boolean = false;
  const animateOpacity: boolean = true;
  const initialOpacity: number = 0.0;
  const distance: number = 100;
  const delay: number = 0;
  const scale: number = 1.0;
  const tension: number = 50;
  const friction: number = 25;
  const threshold: number = 0.1;

  const springConfig: SpringConfig = { tension, friction };

  const animatedItemKey = `${direction}-${reverse}-${animateOpacity}-${initialOpacity}-${distance}-${delay}-${scale}-${tension}-${friction}-${threshold}`;

  return (
    <div className="flex flex-col w-full min-h-screen justify-center items-center 
                   p-4
                   bg-white text-black 
                   dark:bg-black dark:text-white 
                   transition-colors duration-300">
      
      <AnimatedContent
        key={animatedItemKey}
        distance={distance}
        direction={direction}
        reverse={reverse}
        config={springConfig}
        initialOpacity={initialOpacity}
        animateOpacity={animateOpacity}
        scale={scale}
        threshold={threshold}
        delay={delay}
      >
        <div className="px-10 py-6 rounded-2xl border
                        text-lg font-semibold text-center
                        
                        bg-white text-black border-neutral-300 
                        dark:bg-black dark:text-white dark:border-neutral-700 
                        
                        transition-colors duration-300">
          Animate Me
        </div>
      </AnimatedContent>
      
    </div>
  );
};

export { DemoOne };