import React from "react";

const UsernameInput = React.forwardRef((props, ref) => (
  // todo, check if username is already taken here?
  <div>
    <label htmlFor="username" className="block text-sm font-medium text-gray-700">
      {props.label ? props.label : "Username"}
    </label>
    <div className="flex mt-1 rounded-md shadow-sm">
      <span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
        {typeof window !== "undefined" && window.location.hostname}/{props.label && "team/"}
      </span>
      <input
        ref={ref}
        type="text"
        name="username"
        id="username"
        autoComplete="username"
        required
        {...props}
        className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-black sm:text-sm"
      />
    </div>
  </div>
));

UsernameInput.displayName = "UsernameInput";

export { UsernameInput };