import { InputProps } from "../../types/props";

const Input = ({
  label,
  id,
  type,
  name,
  placeholder,
  labelStyle,
  extra,
  ...attrs
}: InputProps) => {
  return (
    <div>
      {label && (
        <label
          htmlFor={id}
          className={`block mb-2 text-sm font-medium text-white ${labelStyle}`}
        >
          {label}
        </label>
      )}
      <input
        type={type}
        name={name}
        id={id}
        className={`outline-none border-none sm:text-sm rounded-lg block w-full p-2.5 md:p-3 bg-gray-700 border-gray-600 placeholder-gray-400 text-white ${extra}`}
        placeholder={placeholder}
        {...attrs}
      />
    </div>
  );
};

export default Input;