<template>
  <div class="flex items-center justify-center min-h-screen bg-[#0c4b66]">
    <div class="bg-white p-8 rounded-2xl shadow-xl w-80 text-center">
      <!-- Logo + Title -->
      <div class="mb-6">
        <img :src="logo" alt="Logo" class="mx-auto w-24">
      </div>

      <!-- Input -->
      <div>
      <InputField v-model="username" type="text" placeholder="Username" />
      <PasswordInput v-model="password" placeholder="Password" />
      </div>

      <!-- Button -->
      <button
        @click="handleLogin"
        class="w-full py-2 bg-sky-400 hover:bg-sky-500 rounded font-bold text-gray-800 transition"
      >
        Login
      </button>
    </div>
  </div>
</template>



<script setup>
import { ref } from "vue";
import logo from '@/../images/logo.png'
import InputField from "@/components/InputField.vue";
const username = ref("");
const password = ref("");
import PasswordInput from "@/components/InputPassword.vue";
// import { ref } from "vue";

// const username = ref("");
// const password = ref("");

// const handleLogin = () => {
//   if (!username.value || !password.value) {
//     alert("Harap isi username dan password!");
//     return;
//   }
//   // Contoh: panggil API login
//   console.log("Login dengan:", username.value, password.value);
// };
</script>
