<template>
  <div class="navbar bg-primary border-b border-gray-700">
    <div class="navbar-start">
      <router-link :to="{ name: 'home' }">
        <img src="../../assets/images/1.png" alt="Company Logo" class="h-10 md:h-12 w-auto" />
      </router-link>
    </div>
    
    <div class="navbar-end gap-2">
      <router-link :to="{ name: 'login' }" class="btn btn-ghost btn-sm">Login</router-link>
      <router-link :to="{ name: 'register' }" class="btn btn-accent btn-sm">Register</router-link>
    </div>
  </div>
</template>



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

// Reactive data (though not used in template)
const user = ref(null)
const loaded = ref(false)
const clicked = ref(false)
const hovered = ref(false)

// Lifecycle
onMounted(() => {
  // Component mounted
})
</script>

<style scoped></style>