"use client"

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

export default function Loading() {
  const numberOfLines = 5

  useEffect(() => {
    const loader = document.getElementById("loader") as HTMLElement

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

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

  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` }}></div>)
    }
    return lines.map(line => line)
  }

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