'use client'

import React from 'react'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import { ArrowLeft, ArrowRight } from '@phosphor-icons/react'
import type { NavItem } from '@/lib/docs/navigation'

/**
 * Page Navigation (Prev/Next)
 * 
 * Shows links to previous and next pages
 */

interface PageNavProps {
  prev?: NavItem
  next?: NavItem
  className?: string
}

export function PageNav({ prev, next, className }: PageNavProps) {
  if (!prev && !next) return null
  
  return (
    <nav 
      className={cn('flex items-center justify-between gap-4 pt-8 mt-8 border-t border-border', className)}
      aria-label="Page navigation"
    >
      {prev ? (
        <Link
          href={prev.href}
          className="group flex-1 flex flex-col items-start gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors"
        >
          <span className="flex items-center gap-1 text-xs text-muted-foreground">
            <ArrowLeft className="h-3 w-3" />
            Previous
          </span>
          <span className="font-medium text-foreground group-hover:text-primary transition-colors">
            {prev.title}
          </span>
        </Link>
      ) : (
        <div className="flex-1" />
      )}
      
      {next ? (
        <Link
          href={next.href}
          className="group flex-1 flex flex-col items-end gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors text-right"
        >
          <span className="flex items-center gap-1 text-xs text-muted-foreground">
            Next
            <ArrowRight className="h-3 w-3" />
          </span>
          <span className="font-medium text-foreground group-hover:text-primary transition-colors">
            {next.title}
          </span>
        </Link>
      ) : (
        <div className="flex-1" />
      )}
    </nav>
  )
}
