<script setup>
  import { ref } from 'vue'

  const emit = defineEmits(['login'])

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

  function submitLogin() {
    if (username.value && password.value) {
      emit('login', { username: username.value, password: password.value })
    } else {
      alert('Please enter username and password')
    }
  }
</script>

<template>
  <div class="splash-page">
    <div class="login-card">
      <h2>MQTT Login</h2>
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <Button @click="submitLogin">Login</Button>
    </div>
  </div>
</template>

<style scoped>
  .splash-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--p-primary-color-light);
  }

  .login-card {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    width: 300px;
    text-align: center;
  }

  .login-card input {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  .login-card button {
    margin-top: 1rem;
    width: 100%;
    padding: 0.5rem;
  }
</style>
