<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

const activeSection = ref('overview')

const sidebarItems = [
  { label: 'Overview', value: 'overview', icon: 'grid' },
  { label: 'Orders', value: 'orders', icon: 'package' },
  { label: 'Addresses', value: 'addresses', icon: 'map-pin' },
  { label: 'Wishlist', value: 'wishlist', icon: 'heart' },
  { label: 'Settings', value: 'settings', icon: 'settings' },
]
</script>

<template>
  <div class="flex min-h-screen flex-col">
    <!-- Header -->
    <header class="sticky top-0 z-50 border-b bg-background">
      <div class="container mx-auto flex h-14 items-center justify-between px-4 md:px-6">
        <a href="#" class="text-xl font-bold tracking-tight">STORE</a>
        <nav class="hidden items-center gap-6 md:flex">
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Home</a>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Shop</a>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">About</a>
        </nav>
        <div class="flex items-center gap-2">
          <Button variant="ghost" size="sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
            Account
          </Button>
        </div>
      </div>
    </header>

    <!-- Sidebar + Content -->
    <div class="container mx-auto flex flex-1 px-4 md:px-6">
      <!-- Sidebar (desktop) -->
      <aside class="hidden w-56 shrink-0 border-r pr-6 pt-8 md:block">
        <h2 class="mb-4 text-sm font-semibold text-muted-foreground">My Account</h2>
        <nav class="space-y-1">
          <button
            v-for="item in sidebarItems"
            :key="item.value"
            class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors"
            :class="activeSection === item.value ? 'bg-muted font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'"
            @click="activeSection = item.value"
          >
            {{ item.label }}
          </button>
        </nav>
      </aside>

      <!-- Mobile Navigation -->
      <div class="flex gap-2 overflow-x-auto border-b py-3 md:hidden">
        <button
          v-for="item in sidebarItems"
          :key="item.value"
          class="shrink-0 rounded-full border px-3 py-1 text-xs transition-colors"
          :class="activeSection === item.value ? 'border-foreground bg-foreground text-background' : 'text-muted-foreground hover:border-foreground/50'"
          @click="activeSection = item.value"
        >
          {{ item.label }}
        </button>
      </div>

      <!-- Main Content -->
      <main class="flex-1 py-8 md:pl-8">
        <div class="mb-6">
          <h1 class="text-2xl font-bold capitalize">{{ activeSection }}</h1>
          <p class="mt-1 text-sm text-muted-foreground">
            Manage your account {{ activeSection }} and preferences.
          </p>
        </div>

        <!-- Placeholder Content -->
        <div class="rounded-lg border border-dashed p-12 text-center">
          <p class="text-sm text-muted-foreground">
            {{ activeSection.charAt(0).toUpperCase() + activeSection.slice(1) }} content goes here.
          </p>
          <p class="mt-1 text-xs text-muted-foreground/60">
            Sidebar remains visible while content area scrolls independently.
          </p>
        </div>
      </main>
    </div>

    <!-- Footer -->
    <footer class="border-t">
      <div class="container mx-auto flex items-center justify-between px-4 py-6 text-sm text-muted-foreground md:px-6">
        <span>&copy; {{ new Date().getFullYear() }} STORE</span>
        <div class="flex gap-4">
          <a href="#" class="hover:text-foreground">Privacy</a>
          <a href="#" class="hover:text-foreground">Terms</a>
        </div>
      </div>
    </footer>
  </div>
</template>