import Link from '~/components/Link'
import Button from '~/components/Button'
import { Link as RemixLink } from '@remix-run/react'
import { ArrowRightIcon } from '@primer/octicons-react'
import { cn } from '~/utils/cn'

export default function Page() {
	return (
		<div className="flex flex-col gap-8 max-w-screen-lg">
			<div className='flex flex-col w-2/3'>
				<h1 className='text-2xl font-medium mb-4'>Pre-Auth Keys</h1>
				<p className="text-gray-700 dark:text-gray-300">
					Headscale fully supports pre-authentication keys in order to
					easily add devices to your Tailnet.
					To learn more about using pre-authentication keys, visit the
					{' '}
					<Link
						to="https://tailscale.com/kb/1085/auth-keys/"
						name="Tailscale Auth Keys documentation"
					>
						Tailscale documentation
					</Link>
				</p>
			</div>
			<RemixLink
				to="/settings/auth-keys"
				name="Auth Keys"
			>
				<span className={cn(
					'text-lg font-medium',
					'text-gray-700 dark:text-gray-300',
				)}>
					Manage Auth Keys
					<ArrowRightIcon className="w-5 h-5 ml-2" />
				</span>
			</RemixLink>
		</div>
	)
}