"use client"

import { useParams } from "next/navigation"
import { useEffect, useState } from "react"

export default function useHash() {
  const [hash, setHash] = useState<string | undefined>(undefined)
  const params = useParams()

  useEffect(() => {
    const updateHash = () => {
      const newHash = window.location.hash
        ? window.location.hash.slice(1)
        : undefined
      setHash(newHash)
    }

    updateHash()

    window.addEventListener("hashchange", updateHash)

    return () => {
      window.removeEventListener("hashchange", updateHash)
    }
  }, [params])

  return hash
}