'use client'

import Button from '@/components/formElements/Button'
import { texts, format } from '@/texts'

interface RouteErrorViewProps {
  digest?: string
  onRetry: () => void
}

export const RouteErrorView = ({ digest, onRetry }: RouteErrorViewProps) => (
  <main
    className="flex min-h-[100dvh] w-full flex-col items-center justify-center gap-4 px-6 text-center"
    role="alert"
  >
    <div>
      <h1 className="text-xl font-bold">{texts.common.somethingWentWrong}</h1>
      <p className="mt-2 text-sm text-default-700">{texts.common.tryAgainOrSupport}</p>
      {digest ? <p className="mt-2 font-mono text-xs text-default-700">{format(texts.common.trackingId, { digest })}</p> : null}
    </div>
    <div className="flex gap-2">
      <Button onClick={onRetry}>{texts.common.retry}</Button>
      <Button
        to="/"
        variant="flat"
      >
        {texts.common.backHome}
      </Button>
    </div>
  </main>
)