<script setup>
import ResponsiveControls from './ResponsiveControls.vue';
const emit = defineEmits(['export-code']);
</script>

<template>
  <header class="builder-header">
    <div class="left-side">
      <h2>Vue Site Builder</h2>
    </div>
    <div class="center-side">
      <ResponsiveControls />
    </div>
    <div class="right-side">
      <button>Preview</button>
      <button @click="emit('export-code')">Export to Vue</button>
    </div>
  </header>
</template>

<style scoped>
.builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--panel-color);
  border-bottom: 1px solid var(--border-color);
}
.left-side h2 {
  font-size: 1.1rem;
  margin: 0;
}
.right-side button {
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}
.right-side button:hover {
  background-color: var(--accent-color-hover);
}
</style>
