"use client"

import { memo } from "react"
import type { GraphNode } from "./types"

interface NavigationControlsProps {
	onCenter: () => void
	onZoomIn: () => void
	onZoomOut: () => void
	onAutoFit: () => void
	nodes: GraphNode[]
	className?: string
}

export const NavigationControls = memo<NavigationControlsProps>(({
	onCenter,
	onZoomIn,
	onZoomOut,
	onAutoFit,
	nodes,
	className = "",
}) => {
	if (nodes.length === 0) {
		return null
	}

	return (
		<div className={`flex flex-col gap-1 ${className}`}>
			<button
				type="button"
				onClick={onAutoFit}
				className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
				title="Auto-fit graph to viewport"
			>
				Fit
			</button>
			<button
				type="button"
				onClick={onCenter}
				className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
				title="Center view on graph"
			>
				Center
			</button>
			<div className="flex flex-col">
				<button
					type="button"
					onClick={onZoomIn}
					className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-t-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16 border-b-0"
					title="Zoom in"
				>
					+
				</button>
				<button
					type="button"
					onClick={onZoomOut}
					className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-b-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
					title="Zoom out"
				>
					−
				</button>
			</div>
		</div>
	)
})

NavigationControls.displayName = "NavigationControls"