"use client"

import { useEffect, useState } from "react"
import { generateRange, getUniqueRandomFromArr } from "@/lib/utils/array"
import styles from "@/styles/utils/Loading.module.css"

export default function Loading() {
  const numberOfLines = 5
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    if (!mounted) return

    const loader = document.getElementById("loader")

    if (!loader) return

    setTimeout(() => {
      loader.style.opacity = "0"

      setTimeout(() => {
        loader.style.display = "none"
      }, 300)
    }, 100)
  }, [mounted])

  function renderLines() {
    const lines = []
    const min = 0.3
    const step = 0.1
    const max = min + (step * numberOfLines)
    const durations = generateRange(min, max, step)

    for (let i = 0; i < numberOfLines; i++) {
      const duration = getUniqueRandomFromArr(durations)
      lines.push(<div key={i} className={styles.line} style={{ animationDuration: `${duration}s` }} />)
    }

    return lines
  }

  return (
    <div id="loader" className={styles.loader}>
      <div className={styles.lines}>{mounted && renderLines()}</div>
    </div>
  )
}