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

  // Start the loader
  initLoader('flip', 70);

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

  initCustomLoader(YOUR_CUSTOM_SPEED, YOUR_CUSTOM_KEYFRAMES);
  // Example: initCustomLoader(100, ["_","_","_","-","`","`","'","´","-","_","_","_",]);

  const initLoader = () => {
    // Set keyframes
    const keyframes = ["_","_","_","-","`","`","'","´","-","_","_","_"];
    // Set speed in milliseconds
    const speed = 70;
    // 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 = ["_","_","_","-","`","`","'","´","-","_","_","_"];
    const speed = 70;

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

  }