<template>
  <form @submit.prevent="handleSubmit" class="space-y-6">
    <div class="form-group">
      <label class="form-label">Email</label>
      <input 
        v-model="form.email"
        type="email" 
        class="form-input"
        placeholder="your@email.com"
        required
      >
    </div>
    
    <div class="form-group">
      <label class="form-label">Пароль</label>
      <input 
        v-model="form.password"
        type="password" 
        class="form-input"
        placeholder="Введите пароль"
        required
      >
    </div>
    
    <div class="flex items-center justify-between">
      <label class="flex items-center">
        <input type="checkbox" class="rounded border-gray-300">
        <span class="ml-2 text-sm text-gray-600">Запомнить меня</span>
      </label>
      
      <a href="#" class="text-sm text-primary-600 hover:text-primary-700">
        Забыли пароль?
      </a>
    </div>
    
    <button 
      type="submit" 
      class="btn btn-primary w-full"
      :disabled="loading"
    >
      <span v-if="loading">Вход...</span>
      <span v-else>Войти</span>
    </button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const { login } = useAuth()

const form = ref({
  email: '',
  password: ''
})

const loading = ref(false)

const handleSubmit = async () => {
  loading.value = true
  
  try {
    await login(form.value)
    await navigateTo('/profile')
  } catch (error) {
    console.error('Login error:', error)
    // Здесь можно добавить уведомление об ошибке
  } finally {
    loading.value = false
  }
}
</script>