import styles from "./SplashScreen.module.css";

interface SplashScreenProps {
	exiting?: boolean;
}

export function SplashScreen({ exiting = false }: SplashScreenProps) {
	return (
		<div className={`${styles.splash} ${exiting ? styles.splashExiting : ""}`} aria-hidden={exiting}>
			<div className={styles.bgPulse} />
			<div className={styles.bgGlow} />
			<div className={styles.content}>
				<div className={styles.logoWrap}>
					<span className={styles.ring} />
					<span className={`${styles.ring} ${styles.ring2}`} />
					<span className={`${styles.ring} ${styles.ring3}`} />
					<img className={styles.logo} src="/logo192.png" width={96} height={96} alt="" decoding="async" />
				</div>
				<div className={styles.titleBlock}>
					<h1 className={styles.title}>萌小芽</h1>
					<p className={styles.subtitle}>加载中</p>
				</div>
				<div className={styles.dots} aria-label="加载中">
					<span className={styles.dot} />
					<span className={`${styles.dot} ${styles.dot2}`} />
					<span className={`${styles.dot} ${styles.dot3}`} />
				</div>
			</div>
		</div>
	);
}
