// src/components/auth/FloatingInput.jsx
import React from "react";

export default function FloatingInput({ label, type = "text", name, register, rules, error, wrapperClassName = "", inputProps = {} }) {
  return (
    <div>
      <div className={["w-full mt-6 text-white bg-[#A1E3F919] rounded-md grid relative items-center", wrapperClassName].join(" ")}>
        <input
          className="peer h-14 px-6 w-full invalid:border in-required:border border-red-700 border-solid outline-0 focus:outline-0 text-white rounded-md placeholder:hidden bg-transparent"
          placeholder=" "
          type={type}
          {...inputProps}
          {...register(name, rules)}
        />
        <label className="absolute px-6 duration-200 text-md font-medium pointer-events-none peer-not-placeholder-shown:text-sm peer-not-placeholder-shown:px-3 peer-not-placeholder-shown:-translate-y-8 peer-focus:text-sm peer-focus:px-3 peer-focus:-translate-y-8">
          {label}
        </label>
      </div>

      {error && <span className="text-red-600 font-bold text-sm mt-2 px-1">{error}</span>}
    </div>
  );
}
