import { useState } from "react";
import { motion } from "motion/react";

import tg from "@/tg";

import classes from "./Settings.module.css";

export default function Settings() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    tg.hapticFeedback.click();
    setIsOpen((prev) => !prev);
  };

  return (
    <motion.button
      initial={{ scale: 0, x: "50%", y: "-50%" }}
      animate={{ scale: 1, x: 0, y: 0 }}
      whileTap={{ scale: 0.95 }}
      transition={{ duration: 0.1, type: "spring" }}
      className={classes.settings}
      onClick={toggle}
    >
      <div className={classes.bars}>
        {[0, 1, 2].map((i) => (
          <motion.span
            key={i}
            className={classes.bar}
            initial={{ scale: 0 }}
            animate={
              isOpen
                ? i === 0
                  ? { scale: 1, rotate: 45, y: 12 }
                  : i === 1
                    ? { scale: 1, opacity: 0, scaleX: 0 }
                    : { scale: 1, rotate: -45, y: -12 }
                : { scale: 1, rotate: 0, y: 0, opacity: 1, scaleX: 1 }
            }
            transition={{
              scale: { delay: 0.05 * i + 0.1, duration: 0.15, type: "spring" },
              default: { duration: 0.1 },
            }}
          />
        ))}
      </div>
    </motion.button>
  );
}
