import { Link } from "@tanstack/react-router";
import { useAuth } from "../hooks/useAuth";
import { LucideIcon } from "../lib/iconData";
import { UserMenu } from "./UserMenu";

interface TotalsBarProps {
	title?: string;
	linkTo?: string;
}

export function TotalsBar({ title = "GearBox", linkTo }: TotalsBarProps) {
	const { data: auth } = useAuth();
	const isAuthenticated = !!auth?.user;

	const titleContent = (
		<span className="flex items-center gap-2">
			<LucideIcon name="package" size={20} className="text-gray-500" />
			{title}
		</span>
	);

	const titleElement = linkTo ? (
		<Link
			to={linkTo}
			className="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors"
		>
			{titleContent}
		</Link>
	) : (
		<h1 className="text-lg font-semibold text-gray-900">{titleContent}</h1>
	);

	return (
		<div className="sticky top-0 z-10 bg-white border-b border-gray-100">
			<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
				<div className="flex items-center justify-between h-14">
					{titleElement}
					<div className="flex items-center gap-4">
						{isAuthenticated ? (
							<UserMenu />
						) : (
							<Link
								to="/login"
								className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
							>
								Sign in
							</Link>
						)}
					</div>
				</div>
			</div>
		</div>
	);
}
