import classes from "./Profile.module.css";
import { motion } from "motion/react";
import { Liftable } from "@components/lift";
import { useTelegramUser } from "@/tg";

export default function Profile() {
  const user = useTelegramUser();
  return (
    <Liftable always>
      <motion.div
        initial={{ scale: 0, x: "-100vw" }}
        animate={{ scale: 1, x: 0 }}
        transition={{ duration: 0.3, type: "spring", bounce: 0.2 }}
        className={classes.profile}
      >
        <div className={classes.avatar}>
          <div className={classes.avatarBorder}>
            <div className={classes.avatarInner}>
              {user?.photoUrl && <img className={classes.avatarImage} src={user.photoUrl} alt="" />}
            </div>
          </div>
        </div>
        <div className={classes.right}>
          <div className={classes.rightTop} />
          <div className={classes.rightBottom} />
        </div>
      </motion.div>
    </Liftable>
  );
}
