<template>
  <div class="cw-canvas-hdr">
    <div class="cw-canvas-actions-left">
      <button type="button" class="cw-toolbar-btn" :disabled="!canUndo" @click="undo" title="Undo">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="15" height="15">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"/>
        </svg>
      </button>
      <button type="button" class="cw-toolbar-btn" :disabled="!canRedo" @click="redo" title="Redo">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="15" height="15">
          <path stroke-linecap="round" stroke-linejoin="round" d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3"/>
        </svg>
      </button>
    </div>
    <div class="cw-device-toggle">
      <button type="button" :class="['cw-device-btn', previewDevice === 'desktop' && 'is-active']" @click="previewDevice = 'desktop'" title="Desktop preview">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="15" height="15">
          <rect width="20" height="14" x="2" y="3" rx="2"/>
          <line x1="8" x2="16" y1="21" y2="21"/>
          <line x1="12" x2="12" y1="17" y2="21"/>
        </svg>
      </button>
      <button type="button" :class="['cw-device-btn', previewDevice === 'mobile' && 'is-active']" @click="previewDevice = 'mobile'" title="Mobile preview">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="15" height="15">
          <rect width="10" height="16" x="7" y="3" rx="2"/>
          <path d="M11 19h2"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const { previewDevice, canUndo, canRedo, undo, redo } = inject('formEditorState');
</script>
