import React from "react";

type InputProps = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;

type Props = {
  label?: string;
  error?: string;
} & InputProps;

const Input = React.forwardRef<HTMLInputElement, Props>(
  (
    { label, error, ...rest }: Props,
    ref: React.ForwardedRef<HTMLInputElement>,
  ) => {
    const { type } = rest;
    const isHidden = type && type === "hidden";
    const { required, ...restWithoutRequired } = rest;

    return (
      <>
        {
          <label
            // htmlFor={label.toLowerCase()}
            className={`${
              isHidden ? "" : "mb-5"
            } block text-[18px] font-medium capitalize text-compassion-blue`}
          >
            {label}
            {required && <span className="text-[#B52237]">*</span>}
            <input
              ref={ref}
              type="text"
              className={`mt-2 block h-[48px] w-full appearance-none rounded-fivepixel border border-black outline bg-white px-6 pb-3.5 pt-3.1 text-[18px] font-medium text-compassion-black ${
                error ? "border-[#F4871F]" : "border-[#A0AAB1]"
              } `}
              // autoComplete="off"
              // aria-label={label}
              {...restWithoutRequired}
            />
            {error && (
              <div className="flex flex-row gap-2 pt-[10px]">
                <p className="text-[14px] font-medium normal-case leading-[18.2px] text-compassion-black">
                  {error}
                </p>
              </div>
            )}
          </label>
        }
      </>
    );
  },
);

Input.displayName = "Input";
Input.defaultProps = {
  label: undefined,
  error: undefined,
};

export default Input;