<script setup>
import { useProjectStore } from '../stores/projectStore';

const projectStore = useProjectStore();
</script>

<template>
  <div class="pages-panel">
    <div class="panel-content">
      <ul v-if="projectStore.currentProject">
        <li 
          v-for="page in projectStore.currentProject.pages" 
          :key="page.id"
          :class="{ active: page.id === projectStore.activePageId }"
          @click="projectStore.setActivePage(page.id)"
        >
          {{ page.name }}
        </li>
      </ul>
    </div>
    <div class="panel-footer">
      <button @click="projectStore.createNewPage()">+ New Page</button>
    </div>
  </div>
</template>

<style scoped>
.pages-panel {
  width: 200px;
  background-color: var(--panel-color);
  display: flex;
  flex-direction: column;
}
.panel-content {
  padding: 0.5rem;
  overflow-y: auto;
  flex-grow: 1;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
li:hover {
  background-color: #2a3441;
}
li.active {
  background-color: var(--accent-color);
  color: white;
  font-weight: 500;
}
.panel-footer {
  border-top: 1px solid var(--border-color);
  padding: 0.5rem;
  flex-shrink: 0;
}
.panel-footer button {
  width: 100%;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color-darker);
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.panel-footer button:hover {
  background-color: #2a3441;
  color: var(--text-color);
}
</style>
