import ArrowLeftIcon from "@icons/arrowLeft";
import ArrowRightIcon from "@icons/arrowRight";
import RefreshIcon from "@icons/refresh";

export default function AppHeader() {
	const goBack = () => {
		window.history.back();
	};

	const goForward = () => {
		window.history.forward();
	};

	const reload = () => {
		window.location.reload();
	};

	return (
		<div
			data-tauri-drag-region
			className="flex h-full w-full flex-1 items-center px-2"
		>
			<div
				data-tauri-drag-region
				className="flex w-full items-center justify-center gap-2"
			>
				<div className="flex h-full items-center gap-2">
					<button
						type="button"
						onClick={() => goBack()}
						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
					>
						<ArrowLeftIcon
							width={14}
							height={14}
							className="text-zinc-500 group-hover:text-zinc-300"
						/>
					</button>
					<button
						type="button"
						onClick={() => goForward()}
						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
					>
						<ArrowRightIcon
							width={14}
							height={14}
							className="text-zinc-500 group-hover:text-zinc-300"
						/>
					</button>
				</div>
				<div>
					<input
						autoCapitalize="none"
						autoCorrect="off"
						placeholder="Search..."
						className="h-6 w-[453px] rounded border border-zinc-800 bg-zinc-900 px-2.5 text-center text-[11px] text-sm leading-5 text-zinc-500 placeholder:leading-5 placeholder:text-zinc-600 focus:outline-none"
					/>
				</div>
				<div className="flex h-full items-center gap-2">
					<button
						type="button"
						onClick={() => reload()}
						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
					>
						<RefreshIcon
							width={14}
							height={14}
							className="text-zinc-500 group-hover:text-zinc-300"
						/>
					</button>
				</div>
			</div>
		</div>
	);
}