import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Avatar from "@/feature/Avatar";
import { useAuth } from "@/store/auth";
import type { FC } from "react";

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

  return (
    <div className="flex flex-col items-stretch gap-2 sm:max-w-sm mx-auto p-4">
      <h1 className="text-xl font-medium dark:text-gray-200">
        You're all setup!
      </h1>
      <p className="text-sm dark:text-gray-400">
        You've just finished your account verification. Now you can finally
        access your account and use it for home services.
      </p>

      <Avatar
        avatarId={profile?.profile_picture ?? undefined}
        iconSize={64}
        className="w-48 h-48 min-w-48 mx-auto mt-4"
      />

      <div className="flex flex-col items-center mb-5">
        <h2 className="dark:text-gray-200 text-2xl">{profile?.full_name}</h2>

        <p className="dark:text-gray-400 text-sm">{profile?.email}</p>
      </div>

      <Button className="mt-4">Back Home</Button>
    </div>
  );
};

export default VerifyReviewPage;