"use client" // Error components must be Client Components

import { usePathname } from "next/navigation"
import { useEffect } from "react"

import { findLang } from "@/constants/languages"

import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"

import styles from "./error.module.css"

export default function Error({
  error,
}: {
  error: Error & { digest?: string }
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  const pathname = usePathname()
  const lang = findLang(pathname)

  return (
    <div
      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
    >
      <div className={styles.content}>{lang}: Something went wrong!</div>
    </div>
  )
}