import { Spinner } from "@/components/ui/spinner";
import { useRef } from "react";

const CHEEKY_MESSAGES = [
	"Sharpening katanas and downloading manga...",
	"Searching for the One Piece... and your titles.",
	"Summoning the Great Sage for faster loading...",
	"Powering up to Super Saiyan level... please wait.",
	"Collecting all seven Dragon Balls to fetch data...",
	"Even Saitama takes a second to load... sometimes.",
	"Naruto is training, wait for the results...",
	"Loading... because we don't have a Death Note for bugs.",
	"Entering the Hidden Leaf Village... of data.",
	"Waiting for the next chapter... and your results.",
	"Training in the Hyperbolic Time Chamber for better speed...",
	"Collecting chakra for the ultimate data retrieval...",
	"Waiting for the next hiatus to end... oh wait, just loading.",
	"Reading the manga faster than you can... hold on.",
	"Asking the Shinigami for the right data...",
	"Is this a Jojo reference? No, it's just loading.",
	"Surpassing our limits... Right here! Right now!",
	"Hunting for the rarest manga volumes in the digital world...",
	"Dodging spoilers while fetching your manga...",
	"Preparing the transmutation circle for your results...",
];

export const MangaLoadingState = () => {
	const loadingMessage = useRef(
		CHEEKY_MESSAGES[Math.floor(Math.random() * CHEEKY_MESSAGES.length)],
	);

	return (
		<div className="flex-1 flex flex-col items-center justify-center gap-4">
			<Spinner className="size-12 text-primary" />
			<p className="animate-pulse text-muted-foreground font-medium text-center px-4">
				{loadingMessage.current}
			</p>
		</div>
	);
};
