<template>
  <div class="min-h-screen bg-base-100">
    <!-- Navbar -->
    <div class="navbar bg-base-300 shadow-lg">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
            </svg>
          </div>
        </div>
        <a class="btn btn-ghost text-xl">Ziya</a>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          <li><a>Trading</a></li>
          <li><a>Portfolio</a></li>
          <li><a>Markets</a></li>
        </ul>
      </div>
      <div class="navbar-end">
        <button class="btn btn-primary">Get Started</button>
      </div>
    </div>

    <!-- Main content -->
    <main>
    <slot />
    </main>

    <!-- Footer -->
    <footer class="footer footer-center p-4 bg-base-200 text-base-content mt-auto">
      <aside>
        <p>© 2024 Ziya - One Stop Shop for your trading needs</p>
      </aside>
    </footer>
  </div>
</template>

<script setup lang="ts">
// Inject theme from app.vue
const theme = inject('theme') as Ref<string>;
const toggleTheme = inject('toggleTheme') as () => void;
</script>

<style>
/* Global styles can go here */
</style>