import { ArrowLeft } from "lucide-react";
import { memo, useCallback } from "react";

import logoSrc from "@/assets/logo.png";
import { Button } from "@/components/ui/button";

const SetupHeader = memo(function SetupHeader() {
	const handleBack = useCallback(() => {
		if (typeof window === "undefined") {
			return;
		}

		window.history.back();
	}, []);

	return (
		<header className="flex items-center justify-start gap-3 bg-muted px-5 py-3 shadow-sm">
			<Button
				type="button"
				variant="ghost"
				size="lg"
				onClick={handleBack}
				className="px-3"
				aria-label="Go back"
			>
				<ArrowLeft className="size-5" aria-hidden="true" />
			</Button>
			<img
				src={logoSrc}
				alt="Nontara logo"
				className="h-9 w-auto select-none"
				loading="eager"
				fetchPriority="high"
				decoding="async"
				draggable={false}
			/>
		</header>
	);
});

SetupHeader.displayName = "SetupHeader";

export default SetupHeader;
