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

import tg from "@/tg";
import classes from "./RangeInput.module.css";

type Props = Omit<HTMLMotionProps<"input">, "className"> & {
  className?: ClassValue;
};

export default function RangeInput({ className, onChange, ...props }: Props) {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <motion.input
      {...props}
      type="range"
      className={clsx(classes.rangeInput, isDragging && classes.dragging, className)}
      onChange={(e) => {
        tg.hapticFeedback.inputChange();
        onChange?.(e);
      }}
      onMouseDown={() => setIsDragging(true)}
      onMouseUp={() => setIsDragging(false)}
      onMouseLeave={() => setIsDragging(false)}
      onTouchStart={() => setIsDragging(true)}
      onTouchEnd={() => setIsDragging(false)}
    />
  );
}
