"use client";
import { HTMLInputTypeAttribute, useState } from "react";
import { RegisterOptions, UseFormRegister } from "react-hook-form";

function InputGroup({
  id,
  label,
  register,
  type,
  validation,
  error,
}: {
  label: string;
  id: string;
  register: UseFormRegister<any>;
  type: HTMLInputTypeAttribute;
  validation?: RegisterOptions;
  error?: string;
}) {
  const [isFocused, setIsFocused] = useState(false);
  const [hasValue, setHasValue] = useState(false);

  const { onChange, ...rest } = register(id, validation);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setHasValue(e.target.value !== "");
    onChange(e);
  };

  return (
    <div>
      <div className="relative w-full my-3">
        <input
          type={type}
          className={`border ${
            error
              ? "border-red-500"
              : isFocused
              ? "border-(--primary)"
              : "border-gray-200"
          } p-2 py-3 rounded-lg w-full outline-none`}
          id={id}
          {...rest}
          onChange={handleChange}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
        <label
          htmlFor={id}
          className={`absolute left-3 transition-all duration-200 pointer-events-none bg-white px-1 ${
            isFocused || hasValue
              ? "-top-2 text-xs text-gray-600"
              : "top-1/2 -translate-y-1/2 text-base text-gray-400"
          }`}>
          {label}
          <span className="text-red-400">*</span>
        </label>
      </div>
      {error && <p className="text-red-500 text-sm my-3">{error}</p>}
    </div>
  );
}

export default InputGroup;