// Page Error Component (for 404, 403, etc.)
import { useNavigate } from 'react-router-dom';
import Button from './Button';
import './PageError.css';

interface PageErrorProps {
  code?: number;
  title?: string;
  message?: string;
  showBackButton?: boolean;
}

export default function PageError({
  code = 404,
  title,
  message,
  showBackButton = true,
}: PageErrorProps) {
  const navigate = useNavigate();

  const errorMessages: Record<number, { title: string; message: string }> = {
    404: {
      title: 'Page Not Found',
      message: 'The page you are looking for does not exist.',
    },
    403: {
      title: 'Access Forbidden',
      message: 'You do not have permission to access this page.',
    },
    500: {
      title: 'Server Error',
      message: 'An error occurred on the server. Please try again later.',
    },
  };

  const error = errorMessages[code] || {
    title: title || 'Error',
    message: message || 'An error occurred.',
  };

  return (
    <div className="page-error">
      <div className="page-error__content">
        <div className="page-error__code">{code}</div>
        <h1 className="page-error__title">{error.title}</h1>
        <p className="page-error__message">{error.message}</p>
        {showBackButton && (
          <div className="page-error__actions">
            <Button variant="primary" onClick={() => navigate(-1)}>
              Go Back
            </Button>
            <Button variant="secondary" onClick={() => navigate('/dbis/overview')}>
              Go to Dashboard
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}

