'use client'

import { useEffect, useState } from 'react'

/**
 * Thin top strip shown while `active` is true. Stays visible for at least
 * `minDurationMs` so quick fetches don't produce an invisible flicker.
 */
export function TopLoader({ active, minDurationMs = 350 }: { active: boolean; minDurationMs?: number }) {
  const [visible, setVisible] = useState(active)

  useEffect(() => {
    if (active) {
      setVisible(true)
      return
    }
    const t = setTimeout(() => setVisible(false), minDurationMs)
    return () => clearTimeout(t)
  }, [active, minDurationMs])

  if (!visible) return null
  return (
    <div className="top-loader">
      <div className="top-loader__bar">
        <span className="top-loader__head" />
      </div>
    </div>
  )
}