import type { ReactNode } from 'react';

export interface NotFoundPageProps {
  title?: string;
  message?: string;
  statusCode?: string;
  backLabel?: string;
  backHref?: string;
  onBack?: () => void;
  className?: string;
}

export function NotFoundPage({
  title = 'Page not found',
  message = "The page you're looking for doesn't exist or has been moved.",
  statusCode = '404',
  backLabel = 'Go Back',
  backHref,
  onBack,
  className = '',
}: NotFoundPageProps): ReactNode {
  return (
    <div className={`flex min-h-screen items-center justify-center p-4 ${className}`}>
      <div className="mx-auto max-w-md text-center">
        <div
          className="mb-4 text-6xl font-bold"
          style={{ color: 'var(--color-muted-foreground, #9ca3af)' }}
        >
          {statusCode}
        </div>
        <h2
          className="mb-2 text-xl font-semibold"
          style={{ color: 'var(--color-foreground, #111827)' }}
        >
          {title}
        </h2>
        <p className="mb-6 text-sm" style={{ color: 'var(--color-muted-foreground, #6b7280)' }}>
          {message}
        </p>
        {(onBack || backHref) &&
          (backHref ? (
            <a
              href={backHref}
              className="inline-block rounded-md px-4 py-2 text-sm font-medium text-white transition-colors"
              style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
            >
              {backLabel}
            </a>
          ) : (
            <button
              onClick={onBack}
              className="rounded-md px-4 py-2 text-sm font-medium text-white transition-colors"
              style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
            >
              {backLabel}
            </button>
          ))}
      </div>
    </div>
  );
}