import { motion, type HTMLMotionProps } from "motion/react";
import clsx, { type ClassValue } from "clsx";

import { usePlaySound } from "@/audio";
import tg from "@/tg";

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

type Props = Omit<HTMLMotionProps<"button">, "className"> & {
  className?: ClassValue;
  variant?: "blue" | "red" | "green" | "yellow";
};

const VARIANTS_MAP = {
  blue: classes.blueButton,
  green: classes.greenButton,
  red: classes.redButton,
  yellow: classes.yellowButton,
} satisfies Record<Exclude<Props["variant"], undefined>, string>;

export default function Button({ className, variant = "blue", onClick, ...props }: Props) {
  const play = usePlaySound();

  return (
    <motion.button
      {...props}
      onClick={(e) => {
        play("click");
        tg.hapticFeedback.click();
        onClick?.(e);
      }}
      initial={{ scale: 0.5 }}
      animate={{ scale: 1 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      className={clsx(VARIANTS_MAP[variant], classes.baseButton, className)}
    />
  );
}
