import { type ErrorComponentProps, Link } from '@tanstack/react-router'

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

export const DefaultErrorPage = ({ error }: { error: ErrorComponentProps }) => {
  return (
    <div className="flex w-full pt-4 px-4 h-(--content-without-header)">
      <div className="flex flex-col gap-4 border-1 border-primary w-full h-full items-center justify-center">
        <h2 className="text-center">
          An unexpected error occurred:
          <br />
          {JSON.stringify(error, null, 2)}
        </h2>
        <Button asChild>
          <Link to={'/'}>Back to Home</Link>
        </Button>
      </div>
    </div>
  )
}
