<script setup lang="ts">
const props = defineProps<{
  phone: string;
  password: string;
  error: string | null;
  busy: boolean;
}>();

const emit = defineEmits<{
  (e: "update:phone", value: string): void;
  (e: "update:password", value: string): void;
  (e: "submit"): void;
}>();
</script>

<template>
  <div class="flex h-full items-center justify-center px-3">
    <div class="card w-full max-w-sm border border-base-300 bg-base-100 shadow-sm">
      <div class="card-body p-5">
        <h1 class="text-lg font-semibold">Login</h1>
        <p class="mt-1 text-xs text-base-content/65">Sign in with phone and password.</p>
        <div class="mt-4 space-y-2">
          <input
            :value="props.phone"
            type="tel"
            class="input input-bordered w-full"
            placeholder="+1 555 000 0001"
            @input="emit('update:phone', ($event.target as HTMLInputElement).value)"
            @keyup.enter="emit('submit')"
          >
          <input
            :value="props.password"
            type="password"
            class="input input-bordered w-full"
            placeholder="Password"
            @input="emit('update:password', ($event.target as HTMLInputElement).value)"
            @keyup.enter="emit('submit')"
          >
          <p v-if="props.error" class="text-xs text-error">{{ props.error }}</p>
          <button class="btn w-full" :disabled="props.busy" @click="emit('submit')">
            {{ props.busy ? "Logging in..." : "Login" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
