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

const App = () => {
  const [currentArtIndex, setCurrentArtIndex] = useState(0);

  const asciiArt = [
    `
    /\\_/\\( o.o )
    > ^ <
    `,
    `
     /\\_/\\
    (='.'=)
    (\")_(\")
    `,
    `/\\_/\\
    (^._.^)
     \\   /
      (|)
    `,
    `(\\__/)
    (='.'=)
    (\")_(\")
    `,
    `
     /\\_/\\
    ( o.o )( =^=)
    `,];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentArtIndex((prevIndex) => (prevIndex + 1) % asciiArt.length);
    }, 3000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',backgroundColor: '#f0f0f0',fontFamily: 'monospace'
    }}>
      <pre style={{
        fontSize: '24px',
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '10px',
        boxShadow: '0 0 10px rgba(0,0,0,0.1)'
      }}>
        {asciiArt[currentArtIndex]}
      </pre>
    </div>
  );
};

export default App;