"use client";

import React from "react";

interface InputFieldProps {
  label?: string;
  placeholder?: string;
  type?: string;
  register: any;
  name: string;
  error?: string;
}

const InputField: React.FC<InputFieldProps> = ({
  label,
  placeholder,
  type = "text",
  register,
  name,
  error,
}) => {
  return (
    <div className="mb-4">
      {label && (
        <label htmlFor={name} className="block text-sm text-gray-700 mb-2" >
          {label}
        </label>
      )}
      <input
        id={name}
        type={type}
        placeholder={placeholder}
        {...register(name)}
        className={`w-full px-4 py-3 text-xs border rounded-md focus:outline-none ${
          error ? "border-red-500 border-2" : "border-gray-300 focus:ring-2 focus:ring-blue-500 "
        }`}
      />
      {error && <span className="text-red-500 text-xs font-bold ps-2 pt-1 flex align-middle"> 
{error}</span>}
    </div>
  );
};

export default InputField;