import { ScrollAnimationTrigger } from "@/components/ui/scroll-animation-trigger";

// Basic fade-in effect
export function FadeInExample() {
  return (
    <div className="w-full max-w-md mx-auto">
      <ScrollAnimationTrigger effect="fade" threshold={0.1} once={true}>
        <div className="p-6 bg-white dark:bg-zinc-800 rounded-lg shadow-md">
          <h3 className="text-xl font-bold">Fade In Animation</h3>
          <p className="mt-2">This content fades in when scrolled into view.</p>
        </div>
      </ScrollAnimationTrigger>
    </div>
  );
}
 
// Slide animation with direction
export function SlideInExample() {
  return (
    <div className="w-full max-w-md mx-auto">
      <ScrollAnimationTrigger
        effect="slide"
        direction="up"
        delay={0.2}
        duration={0.6}
      >
        <div className="p-6 bg-white dark:bg-zinc-800 rounded-lg shadow-md">
          <h3 className="text-xl font-bold">Slide Up Animation</h3>
          <p className="mt-2">
            This content slides up when scrolled into view.
          </p>
        </div>
      </ScrollAnimationTrigger>
    </div>
  );
}
 
// Color transition effect
export function ColorChangeExample() {
  return (
    <div className="w-full max-w-md mx-auto">
      <ScrollAnimationTrigger
        effect="color"
        fromColor="#2b13c2"
        toColor="#f002cc"
        threshold={0.2}
      >
        <div className="p-6 bg-white dark:bg-zinc-800 rounded-lg shadow-md">
          <h3 className="text-xl font-bold">Color Transition</h3>
          <p className="mt-2">This text changes color as you scroll.</p>
        </div>
      </ScrollAnimationTrigger>
    </div>
  );
}