import React from 'react';

export const componentMeta = {
  name: "Generating Loader",
  description: "A beautiful, CSS-only generating loader with spinning gradient shadows and sequential letter animations.",
  props: {},
  credit: {
    name: "dexter-st",
    url: "https://uiverse.io/profile/dexter-st"
  }
}

export default function GeneratingLoader() {
  return (
    <div className="flex items-center justify-center w-full h-full font-sans text-xl tracking-tighter text-neutral-400 bg-transparent select-none">
      <style>{`
        .loader {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          aspect-ratio: 1 / 1;
          border-radius: 50%;
          background-color: transparent;
          animation: loader-rotate 2s linear infinite;
          z-index: 0;
        }

        @keyframes loader-rotate {
          0% {
            transform: rotate(90deg);
            box-shadow:
              0 10px 20px 0 #fff inset,
              0 20px 30px 0 #ad5fff inset,
              0 60px 60px 0 #471eec inset;
          }
          50% {
            transform: rotate(270deg);
            box-shadow:
              0 10px 20px 0 #fff inset,
              0 20px 10px 0 #d60a47 inset,
              0 40px 60px 0 #311e80 inset;
          }
          100% {
            transform: rotate(450deg);
            box-shadow:
              0 10px 20px 0 #fff inset,
              0 20px 30px 0 #ad5fff inset,
              0 60px 60px 0 #471eec inset;
          }
        }

        .loader-letter {
          display: inline-block;
          opacity: 0.4;
          transform: translateY(0);
          animation: loader-letter-anim 2s infinite;
          z-index: 1;
        }

        @keyframes loader-letter-anim {
          0%,
          100% {
            opacity: 0.4;
            transform: translateY(0);
          }
          20% {
            opacity: 1;
            transform: scale(1.15);
          }
          40% {
            opacity: 0.7;
            transform: translateY(0);
          }
        }
      `}</style>
      <div className="relative flex items-center justify-center w-[180px] h-[180px] font-bold">
        {Array.from("Generating").map((letter, i) => (
          <span 
            key={i} 
            className="loader-letter" 
            style={{ animationDelay: `${i * 0.1}s` }}
          >
            {letter}
          </span>
        ))}
        <div className="loader opacity-80" />
      </div>
    </div>
  )
}