import { createFileRoute, Navigate } from '@tanstack/react-router';
import { zodValidator } from '@tanstack/zod-adapter';
import z from 'zod';
import NixOSLogo from '@/assets/nixos.svg?react';

const paramsSchema = z.object({
  email: z.string().optional(),
});

export const Route = createFileRoute('/magicLinkSent')({
  component: RouteComponent,
  validateSearch: zodValidator(paramsSchema),
});

function RouteComponent() {
  const { email } = Route.useSearch();
  return email !== undefined
    ? (
        <div className="
      bg-background flex min-h-svh flex-row items-center justify-center gap-6 p-6 md:p-10"
        >
          <NixOSLogo className="size-12" />
          <span
            aria-hidden="true"
            className="mx-2 inline-block h-6 w-px bg-current opacity-40"
          />
          登录链接已发送至
          {' '}
          {email}
        </div>
      )
    : <Navigate to="/login" />;
}