interface RouteErrorProps {
  error: Error;
  reset: () => void;
}

export default function RouteError({ error, reset }: RouteErrorProps) {
  return (
    <section className="relative flex flex-col items-center justify-center py-24 text-center overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-0 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
        <div className="absolute top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
      </div>

      <div className="-rotate-1 mb-4">
        <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
          something went wrong
        </span>
      </div>

      <h1 className="text-5xl font-black tracking-tight text-(--color-text) leading-[1.05]">
        This page{" "}
        <span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
          crashed
        </span>
      </h1>

      <p className="mt-6 text-lg font-medium text-(--color-text-muted) max-w-sm">
        Something went wrong loading this page.{" "}
        <span className="text-(--color-accent) font-bold">Try again</span> or
        head back home.
      </p>

      {import.meta.env.DEV && (
        <pre className="mt-4 max-w-xl w-full text-left text-xs bg-(--color-surface) border border-(--color-primary-light) rounded-2xl p-4 overflow-auto text-(--color-text-muted)">
          {error.message}
        </pre>
      )}

      <div className="mt-8 flex gap-3 flex-wrap justify-center">
        <button
          onClick={reset}
          className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
        >
          Try again
        </button>
      </div>
    </section>
  );
}
