my-portfolio/src/sections/Hero.tsx

"use client";

export function Hero({
  glowColor,
  borderStatus,
  displayMessage,
  rotatingMessages,
  statusMessage,
  showOldNames,
  setShowOldNames,
  oldUsernames,
}: {
  glowColor: string;
  borderStatus: string;
  displayMessage: string;
  rotatingMessages: string[];
  statusMessage: string;
  showOldNames: boolean;
  setShowOldNames: (show: boolean) => void;
  oldUsernames: string[];
}) {
  return (
    <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
      <div className="relative group">
        <div
          className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
          style={{ backgroundColor: glowColor }}
        ></div>
        <div
          className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
        >
          <img
            src="https://cdn.reversed.dev/pictures/20250405_120402.png"
            alt="Space"
            className="w-full h-full object-cover scale-110 transition-transform duration-700 group-hover:scale-125"
          />
        </div>

        {/* Rotating Message Bubble (Left Side) */}
        <div className="absolute -left-4 top-4 -translate-x-full">
          <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-3 shadow-lg">
            {/* Arrow pointing to profile */}
            <div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
            <div className="absolute right-0 top-1/2 translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/20"></div>

            <p className="text-sm text-gray-200 whitespace-nowrap font-medium font-mono">
              {displayMessage || rotatingMessages[0]}
            </p>
          </div>
        </div>

        {/* Status Bubble (Right Side) */}
        <div className="absolute -right-4 top-8 translate-x-full">
          <div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
            {/* Arrow pointing to profile */}
            <div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
            <div className="absolute left-0 top-1/2 -translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/10"></div>

            <p className="text-sm text-gray-300 whitespace-nowrap">
              Currently{" "}
              <span className="text-white font-semibold">
                {statusMessage}
              </span>
              <br />
              on Discord
            </p>
          </div>
        </div>
      </div>

      {/* Name & Description */}
      <div className="space-y-4 max-w-2xl">
        <h1 className="text-6xl md:text-7xl font-extrabold">
          Hey, I'm{" "}
          <span
            className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 cursor-help px-2"
            style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
            onMouseEnter={() => setShowOldNames(true)}
            onMouseLeave={() => setShowOldNames(false)}
          >
            Space²
            {showOldNames && (
              <div className="absolute left-1/2 -translate-x-1/2 top-full mt-4 z-50 animate-fade-in flex justify-center w-full">
                <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-md border border-purple-500/30 rounded-xl px-6 py-4 shadow-2xl min-w-[220px] max-w-xs">
                  <div className="absolute left-1/2 -translate-x-1/2 -top-2 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-purple-500/30"></div>
                  <p className="text-xs text-gray-400 mb-2 font-medium whitespace-nowrap text-center">
                    Also known as:
                  </p>
                  <ul className="flex flex-col items-center gap-1.5">
                    {oldUsernames.map((name, index) => (
                      <li
                        key={index}
                        className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center"
                      >
                        {name}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            )}
          </span>
        </h1>
        <p className="text-2xl text-gray-400 font-light">
          A{" "}
          <span className="line-through decoration-purple-500/50 decoration-2">
            Self-proclaimed
          </span>{" "}
          Developer breaking things to see how they&nbsp;work.
        </p>
      </div>
    </section>
  );
}