import { polysubstitutionLinks } from "@/util/LinksUtil";
import { createFileRoute, Link } from "@tanstack/react-router";


export const Route = createFileRoute("/polysubstitution/")({
	component: PolyPage
});


// eslint-disable-next-line react-refresh/only-export-components
function PolyPage(){
	return (
		<main
			className="flex flex-col items-center"
		>
			<h1
				className="font-bold text-4xl my-8"
			>
				Poly-Substitution Ciphers
			</h1>
			<p
				className="text-center"
			>
				Poly-Substitution ciphers encrypt text multiple characters at a time.
				These are more secure than mono-substitution ciphers because attempts to crack the ciphers through brute force must guess two characters at a time instead of one.
			</p>
			<div
				className="mt-8"
			>
				<ul
					className="grid grid-cols-3 gap-8"
				>
					{
						polysubstitutionLinks.map(cipher => (
							<li
								key={cipher.label}
								className="text-center"
							>
								<Link
									className="cursor-pointer text-lg"
									to={cipher.to}
								>
									{cipher.label}
								</Link>
							</li>
						))
					}
				</ul>
			</div>
		</main>
	);
}