import { Button } from "@/components/ui/button";
import { useAuth } from "@/store/auth";
import { ArrowRight } from "lucide-react";
import type { FC } from "react";
import { Link } from "react-router";

const VerifyStartPage: FC = () => {
  const profile = useAuth((s) => s.profile);

  return (
    <div className="flex flex-col items-center justify-center gap-5 w-full h-screen px-4 sm:px-0 sm:max-w-xl sm:h-auto text-center">
      <img src="/icon.png" className="w-16 h-16" alt="icon" />
      <h1 className="text-2xl dark:text-gray-200 font-medium">
        Welcome to Home Guard!
      </h1>
      <p className="text-base dark:text-gray-500">
        Before you can access your account, we need to first verify your email
        address and setup your profile.
      </p>
      <p className="text-base dark:text-gray-500">
        You will be prompted to upload your real picture as well.{" "}
        <Link to="#" className="text-blue-500">
          Learn more.
        </Link>
      </p>
      <Link to="/verify/email">
        <Button className="flex items-center gap-2">
          <ArrowRight />
          Start Verification
        </Button>
      </Link>
    </div>
  );
};

export default VerifyStartPage;
