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


export const Route = createFileRoute('/combination/')({
	component: CombinationPage
});


function CombinationPage(){
	return (
		<main
			className="flex flex-col items-center"
		>
			<h1
				className="font-bold text-4xl my-8"
			>
				Combination Ciphers
			</h1>
			<p
				className="text-center"
			>
				Combination ciphers encrypt text by combining two or more ciphers.
				These ciphers are the most secure offered on the site because multiple layers of encryption must be broken in order to decrypt the text through brute force methods.
			</p>
			<div
				className="mt-8"
			>
				<ul
					className="grid grid-cols-2 gap-8"
				>
					{
						combinationLinks.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>
	);
}
