"use client"

import { useEffect } from "react"
import { BarChart3 } from "lucide-react"
import { useTranslations } from "next-intl"

import { EmptyState } from "@/shared/components/ui/empty-state"

export default function TeacherPracticeError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}): React.ReactNode {
  const t = useTranslations("practice")
  useEffect(() => {
    console.error("Practice analytics page error:", error)
  }, [error])

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">
          {t("errors.pageErrorTitlePractice")}
        </h1>
        <p className="text-muted-foreground">{t("errors.pageErrorPractice")}</p>
      </div>
      <EmptyState
        icon={BarChart3}
        title={t("errors.loadFailed")}
        description={t("errors.loadFailedDescription")}
        action={{
          label: t("errors.retry"),
          onClick: () => reset(),
        }}
        className="h-[360px] bg-card"
      />
    </div>
  )
}