'use client';

import * as Sentry from '@sentry/nextjs';
import { useEffect } from 'react';
import { AlertTriangle } from 'lucide-react';

type ErrorPageProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <div className="flex min-h-screen items-center justify-center bg-[#050505] px-4 text-white">
      <div className="w-full max-w-md rounded-[1.5rem] border border-white/10 bg-black/40 p-6 text-center shadow-[0_24px_80px_rgba(0,0,0,0.6)] backdrop-blur-xl">
        <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-amber-500/30 bg-amber-500/15 text-amber-300">
          <AlertTriangle className="h-6 w-6" />
        </div>
        <h2 className="mb-2 text-xl font-semibold text-white">Ошибка загрузки страницы</h2>
        <p className="mb-2 text-gray-400">Мы уже получили информацию об этой ошибке.</p>
        {error?.digest ? (
          <p className="mb-5 text-xs text-gray-500">Error ID: {error.digest}</p>
        ) : null}
        <button
          type="button"
          onClick={reset}
          className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 text-sm font-semibold text-white transition-colors hover:from-fuchsia-500/90 hover:to-violet-600/90"
        >
          Повторить
        </button>
      </div>
    </div>
  );
}