<script lang="ts">
  let { id, name, value = "", disabled = false } = $props();
</script>

<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 16"
    fill="currentColor"
    class="h-4 w-4 opacity-70"
  >
    <path
      d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
    />
  </svg>
  <input
    {id}
    {name}
    type="text"
    class="grow"
    {value}
    {disabled}
    required
    placeholder="Username"
  />
</label>
