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

const Home: FC = () => {
  const profile = useAuth((state) => state.profile);
  const signOut = useAuth((state) => state.signOut);

  return (
    <div className="flex flex-col items-center gap-2 p-7">
      <div className="w-24 h-24 sm:w-36 sm:h-36 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
        <Avatar iconSize={64} />
      </div>
      <h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
        Welcome, {profile?.full_name}
      </h1>
      <p className="text-gray-600 dark:text-gray-500 select-none text-center text-sm/normal sm:text-lg">
        Manage your info, private and security to make Home Guard work better
        for you.
      </p>

      <Button className="mt-10" onClick={signOut}>
        Sign Out
      </Button>
    </div>
  );
};

export default Home;