"use client"

import { memo } from "react"
import type { GraphNode } from "@/types"
import {
	navContainer,
	navButton,
	zoomContainer,
	zoomInButton,
	zoomOutButton,
} from "./navigation-controls.css"

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
		}

		const containerClassName = className
			? `${navContainer} ${className}`
			: navContainer

		return (
			<div className={containerClassName}>
				<button
					type="button"
					onClick={onAutoFit}
					className={navButton}
					title="Auto-fit graph to viewport"
				>
					Fit
				</button>
				<button
					type="button"
					onClick={onCenter}
					className={navButton}
					title="Center view on graph"
				>
					Center
				</button>
				<div className={zoomContainer}>
					<button
						type="button"
						onClick={onZoomIn}
						className={zoomInButton}
						title="Zoom in"
					>
						+
					</button>
					<button
						type="button"
						onClick={onZoomOut}
						className={zoomOutButton}
						title="Zoom out"
					>
						−
					</button>
				</div>
			</div>
		)
	},
)

NavigationControls.displayName = "NavigationControls"