// Import the loader initializer
  import { initLoader } from 'cli-loaders';

  // Start the loader
  initLoader('percent', 50);

  // Import the custom loader initializer
  import { initCustomLoader } from 'cli-loaders';

  initCustomLoader(YOUR_CUSTOM_SPEED, YOUR_CUSTOM_KEYFRAMES);
  // Example: initCustomLoader(100, ["000","001","002","003","004","005","006","007","008","009","010","011","012","013","014","015","016","017","018","019","020","021","022","023","024","025","026","027","028","029","030","031","032","033","034","035","036","037","038","039","040","041","042","043","044","045","046","047","048","049","050","051","052","053","054","055","056","057","058","059","060","061","062","063","064","065","066","067","068","069","070","071","072","073","074","075","076","077","078","079","080","081","082","083","084","085","086","087","088","089","090","091","092","093","094","095","096","097","098","099","100",]);

  const initLoader = () => {
    // Set keyframes
    const keyframes = ["000","001","002","003","004","005","006","007","008","009","010","011","012","013","014","015","016","017","018","019","020","021","022","023","024","025","026","027","028","029","030","031","032","033","034","035","036","037","038","039","040","041","042","043","044","045","046","047","048","049","050","051","052","053","054","055","056","057","058","059","060","061","062","063","064","065","066","067","068","069","070","071","072","073","074","075","076","077","078","079","080","081","082","083","084","085","086","087","088","089","090","091","092","093","094","095","096","097","098","099","100"];
    // Set speed in milliseconds
    const speed = 50;
    // Start at the first keyframe
    let index = 0;
    // Set interval to change keyframes
    setInterval(() => {
      process.stdout.write("\r" + keyframes[index]);
      index = (index + 1) % keyframes.length;
    }, speed);
  };
    // Start the loader
    initLoader();

  "use client";

  import React, { useEffect, useState } from 'react';

  type LoaderComponentProps = {
    speed: number;
    keyframes: string[];
  };

  export const LoaderComponent: React.FC<LoaderComponentProps> = ({ speed, keyframes }) => {
    const [currentFrame, setCurrentFrame] = useState(keyframes[0]);

    useEffect(() => {
      let index = 0;

      const interval = setInterval(() => {
        setCurrentFrame(keyframes[index]);
        index = (index + 1) % keyframes.length;
      }, speed);

      return () => clearInterval(interval);
    }, [keyframes, speed]);

    return (
    <div className='relative text-4xl font-mono flex flex-col justify-center items-center overflow-hidden'>{currentFrame}</div>
    )
  }
  

  import { LoaderComponent } from '@/components/LoaderComponent';

  export default function Page() {
    const keyframes = ["000","001","002","003","004","005","006","007","008","009","010","011","012","013","014","015","016","017","018","019","020","021","022","023","024","025","026","027","028","029","030","031","032","033","034","035","036","037","038","039","040","041","042","043","044","045","046","047","048","049","050","051","052","053","054","055","056","057","058","059","060","061","062","063","064","065","066","067","068","069","070","071","072","073","074","075","076","077","078","079","080","081","082","083","084","085","086","087","088","089","090","091","092","093","094","095","096","097","098","099","100"];
    const speed = 50;

    return <LoaderComponent keyframes={keyframes} speed={speed} />

  }