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

const projectStore = useProjectStore();

const presets = [
  { name: 'Desktop HD', width: 1920, height: 1080 },
  { name: 'Desktop', width: 1280, height: 720 },
  { name: 'Tablet', width: 768, height: 1024 },
  { name: 'Mobile L', width: 428, height: 926 },
  { name: 'Mobile M', width: 390, height: 844 },
  { name: 'Mobile S', width: 360, height: 640 },
];

function setDimensions(preset) {
  projectStore.updatePageDimensions({ width: preset.width, height: preset.height });
}
</script>

<template>
  <div class="responsive-controls">
    <button v-for="preset in presets" :key="preset.name" @click="setDimensions(preset)">
      {{ preset.name }}
    </button>
  </div>
</template>

<style scoped>
.responsive-controls {
  display: flex;
  gap: 0.5rem;
}
button {
  background-color: var(--panel-color);
  color: var(--text-color-darker);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
}
button:hover {
  background-color: #2a3441;
  color: var(--text-color);
}
</style>
