"use client"

import { useTranslations } from "next-intl"

import { Button } from "@/components/ui/button"

export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  const tc = useTranslations("Common")

  return (
    <div className="mx-4 lg:mx-6 my-6 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-6">
      <p className="font-medium text-destructive">{tc("api.errorTitle")}</p>
      <p className="mt-2 text-destructive text-sm">{error.message || tc("api.errorFallback")}</p>
      <Button className="mt-4" variant="outline" onClick={reset}>
        Try again
      </Button>
    </div>
  )
}