import * as React from 'react'
import { cn } from '../../lib/utils'

export interface NotFoundProps {
  /** Large code shown above the title (e.g. "404"). Pass null to hide. */
  code?: string | null
  /** Heading. */
  title?: string
  /** Body copy. */
  description?: string
  /**
   * Primary action. Provide your own element (e.g. a Next `<Link>`) so the
   * package stays free of a hard `next/link` dependency. Defaults to a plain
   * anchor to `/`.
   */
  action?: React.ReactNode
  /** Override the outer wrapper className. */
  className?: string
  /** Extra content rendered below the action (e.g. a secondary link). */
  children?: React.ReactNode
}

/**
 * Default 404 surface for an app's `app/not-found.tsx`.
 *
 * Neutral, brandable, and SSR-safe (no client hooks). Pass an `action` node —
 * typically a Next `<Link>` — for app-aware navigation.
 *
 * @example
 * // app/not-found.tsx
 * import Link from 'next/link'
 * import { NotFound } from '@startsimpli/ui'
 * export default function Page() {
 *   return (
 *     <NotFound action={<Link href="/" className="...">Go home</Link>} />
 *   )
 * }
 */
export function NotFound({
  code = '404',
  title = 'Page not found',
  description = "The page you're looking for doesn't exist or has been moved.",
  action,
  className,
  children,
}: NotFoundProps) {
  return (
    <div
      className={cn(
        'min-h-[60vh] flex items-center justify-center p-4 text-center',
        className
      )}
      role="status"
      aria-live="polite"
    >
      <div className="max-w-md w-full">
        {code != null && (
          <p className="mb-2 text-6xl font-bold tracking-tight text-muted-foreground">
            {code}
          </p>
        )}
        <h1 className="mb-3 text-2xl font-semibold text-foreground">{title}</h1>
        <p className="mb-8 text-sm text-muted-foreground">{description}</p>
        <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
          {action ?? (
            <a
              href="/"
              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
            >
              Go home
            </a>
          )}
        </div>
        {children}
      </div>
    </div>
  )
}