export interface InputOptions
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  /**
   * Input wrapper class name
   * @default ""
   * @type string
   */
  wrapperClassName?: string;

  /**
   * Input class name
   * @default ""
   * @type string
   */
  inputClassName?: string;

  /**
   * label class name
   * @default ""
   * @type string
   */
  labelClassName?: string;

  /**
   * Input placeholder
   * @default ""
   * @type string
   */
  placeholder?: string;

  /**
   * Input label
   * @default ""
   * @type string
   */
  label?: string;

  /**
   * Input type
   * @default "text"
   * @type string
   */
  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "file";

  /**
   * Input error state
   * @default false
   * @type boolean
   */
  error?: boolean;

  /**
   * Input error text
   * @default ""
   * @type string
   */
  errorText?: string;

  /**
   * Input required
   * @default false
   * @type boolean
   */
  isInputRequired?: boolean;
}

import { useRef } from "react";
import clsx from "clsx";
import { InputOptions } from "./input.types";

const Input = (props: InputOptions) => {
  const {
    id,
    wrapperClassName = "",
    inputClassName = "",
    labelClassName = "",
    placeholder = "",
    label = "",
    type = "text",
    error = false,
    errorText = "",
    isInputRequired = false,
    ...rest
  } = props;

  const inputRef = useRef<HTMLInputElement | null>(null);

  return (
    <div className={wrapperClassName}>
      <label
        htmlFor={id}
        className={clsx("text-gray-600 text-sm", labelClassName)}
      >
        {label} {isInputRequired && <span className="text-red-600">*</span>}
      </label>
      <div
        className={`border transition duration-300 ease-in-out rounded-xl mt-1 ${
          error
            ? "focus-within:border-red-600 border-red-600"
            : "focus-within:border-gray-700"
        }`}
        onClick={() => inputRef?.current?.focus()}
      >
        <input
          ref={inputRef}
          type={type}
          className={clsx(
            "w-full px-2 h-11 text-gray-900 text-base rounded-xl focus:outline-none",
            inputClassName
          )}
          id={id}
          placeholder={placeholder}
          required={isInputRequired}
          {...rest}
        />
      </div>
      {errorText && <p className="text-xs pt-1 text-red-700">{errorText}</p>}
    </div>
  );
};

export default Input;