"use client"

import type { JSX } from "react"

import { FunctionComponent, memo } from "react"

import { motion } from "framer-motion"
import cs from "classnames"

import { ILoaderProps } from "./Loader.d"
import styles from "./Loader.module.scss"

const DOT_COUNT = 3

const LoaderDots = () => (
	<div className={styles.dots}>
		{Array.from({ length: DOT_COUNT }).map((_, i) => (
			<motion.div
				key={i}
				className={styles.dot}
				animate={{ y: [0, -8, 0] }}
				transition={{
					duration: 0.6,
					repeat: Infinity,
					delay: i * 0.15,
					ease: "easeInOut",
				}}
			/>
		))}
	</div>
)

export const StaticLoader: FunctionComponent<ILoaderProps> = memo(
	({ fullscreen = false, block = false, description }): JSX.Element => {
		if (!fullscreen && !block) {
			return (
				<div className={styles.root}>
					<LoaderDots />
				</div>
			)
		}
		return (
			<div
				className={cs(styles.root, {
					[styles.fullscreen]: fullscreen,
					[styles.block]: block,
				})}
			>
				<LoaderDots />
				<h4 className={styles.description}>{description || "Загрузка"}</h4>
			</div>
		)
	},
)
