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

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

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

export default function TextInput({ className, error, onFocus, ...props }: Props) {
  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
    onFocus?.(e);
    const target = e.target;
    setTimeout(() => {
      if (target.isConnected) {
        target.scrollIntoView({ block: "center", behavior: "smooth" });
      }
    }, 100);
  };

  return (
    <motion.input
      {...props}
      type="text"
      onFocus={handleFocus}
      className={clsx(classes.input, error && classes.error, className)}
    />
  );
}