<script setup>
  import { ref } from 'vue';
  import AuthService from '@/services/auth';
  import { inject } from 'vue';

  const username = ref('');
  const password = ref('');
  const error = ref('');

  async function login() {
    try {
      await AuthService.login({ username: username.value, password: password.value });
      // opcional: redirigir al dashboard
    } catch (e) {
      error.value = e.message;
    }
  }

  // ejemplo de llamada a clientes (requiere token)
  const api = inject('api');

  async function loadCustomers() {
    try {
      const data = await api.getCustomers();
      console.log(data);
    } catch (e) {
      console.error(e);
    }
  }
</script>

<template>
  <h1>Login</h1>
  <v-form @submit.prevent="login">
    <v-text-field v-model="username" label="Usuario" required />
    <v-text-field v-model="password" label="Contraseña" type="password" required />
    <v-btn type="submit">Entrar</v-btn>
    <v-alert v-if="error" type="error">{{ error }}</v-alert>
  </v-form>

  <v-btn @click="loadCustomers">Cargar clientes</v-btn>
</template>
