import { useState } from "react";
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();

  const [satue, setSatue] = useState(1);

  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>
          {satue}
          <button onClick={() => setSatue((v) => v + 1)}>+</button>
          <button onClick={() => setSatue((v) => v - 1)}>-</button>

          <div />
          <div />
        </div>
      </motion.div>
    </Liftable>
  );
}
