import { Transition } from "@headlessui/react";
import classNames from "classnames";
import React from "react";

type Props = React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
> & {
  error?: string;
  touched?: boolean;
  label?: string;
};

export default function InputField({ label, touched, error, ...props }: Props) {
  return (
    <div className="relative py-5">
      {label && <label className="font-bold text-sm absolute top-0 left-1">{label}</label>}
      <input
        type="text"
        className={classNames(
          "w-full rounded-lg px-4 py-2",
          "transition-colors bg-white text-gray-700 text-base leading-6 align-middle",
          "focus:outline-none placeholder:font-normal",
          "focus:ring-2 ring-offset-0 ring-blue-500",
          props.className
        )}
        {...props}
      />
      <Transition
        show={touched && !!error}
        enter="transition duration-100"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition duration-75"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
        >
        <div className="absolute top-1 right-1 flex flex-row items-center text-xs text-red-500">
          {error}
        </div>
      </Transition>
    </div>
  );
}
