/**
 * Copyright (c) 2025 xwra
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

import { useEffect, useState } from "preact/hooks";

export default function Name() {
	const names = ["muxiepuff", "lívia", "aury"];
	const ipas = ["/ˈmuˌksipʌf/", "/li.vjɐ/", "/ˈaʊ̯ˌɾi/"];
	const [currentIndex, setCurrentIndex] = useState(0);
	const [isAnimating, setIsAnimating] = useState(false);

	useEffect(() => {
		const interval = setInterval(() => {
			setIsAnimating(true);
			setTimeout(() => {
				setCurrentIndex((prev) => (prev + 1) % names.length);
				setIsAnimating(false);
			}, 200);
		}, 2000);
		return () => clearInterval(interval);
	}, []);

	return (
		<span class="name-scroller">
			<span class={`name-wrapper ${isAnimating ? "animating" : ""}`}>
				<span class="name-text">
					{names[currentIndex]}
					<span class="name-underline"></span>
				</span>{" "}
				<span class="alt alt-font">({ipas[currentIndex]}, she/her)</span>
			</span>
		</span>
	);
}