Water Glass Loading Animation

import WaterGlassLoader from "@/components/ui/water-glass-loading-animation";
import { useState, useEffect } from "react"

export default function DemoOne() {
  const [progress, setProgress] = useState(0);
  const [isFilling, setIsFilling] = useState(true);
  const [loadingText, setLoadingText] = useState('Filling up...');

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (isFilling) {
          if (prev >= 100) {
            setIsFilling(false);
            return 100;
          }
          return prev + 1;
        } else {
          if (prev <= 0) {
            setIsFilling(true);
            return 0;
          }
          return prev - 1;
        }
      });
    }, 50); // Animation speed

    return () => clearInterval(interval);
  }, [isFilling]);
  
  // Update loading text based on progress
  useEffect(() => {
     if (isFilling) {
        if (progress > 85) setLoadingText('Almost full...');
        else setLoadingText('Filling up...');
     } else {
        if (progress < 15) setLoadingText('Almost empty...');
        else setLoadingText('Emptying...');
     }
  }, [progress, isFilling]);

  return (
    <main className="flex min-h-screen w-full flex-col items-center justify-center bg-gradient-to-br from-cyan-100 to-cyan-300 font-sans">
      <WaterGlassLoader progress={progress} loadingText={loadingText} />
    </main>
  );
}