<script setup lang="ts">
import { Checkbox } from '@vuetify/v0'
import { ref } from 'vue'

const agreed = ref(false)
</script>

<template>
  <div class="container">
    <h1>My First Vuetify Zero Component</h1>
    
    <label class="checkbox-label">
      <Checkbox.Root v-model="agreed" class="checkbox">
        <Checkbox.Indicator class="indicator">
          ✓
        </Checkbox.Indicator>
      </Checkbox.Root>
      
      <span>I agree to the terms and conditions</span>
    </label>
    
    <p v-if="agreed" class="success">
      Thank you for agreeing!
    </p>
  </div>
</template>

<style scoped>
.container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
}

.checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #ddd;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox[data-state="checked"] {
  background: #3b82f6;
  border-color: #3b82f6;
}

.indicator {
  color: white;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.checkbox[data-state="checked"] .indicator {
  opacity: 1;
}

.success {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 0.375rem;
  color: #166534;
}
</style>

<script setup lang="ts">
import { createSelection } from '@vuetify/v0'
import { ref } from 'vue'

interface Task {
  id: string
  label: string
}

const selection = createSelection<Task>({
  multiple: true,
  mandatory: false
})

const tasks = [
  { id: '1', label: 'Write documentation' },
  { id: '2', label: 'Review pull requests' },
  { id: '3', label: 'Update dependencies' },
]

// Register tasks with selection
tasks.forEach(task => {
  selection.register({ id: task.id, value: task })
})

function deleteSelected() {
  const selected = Array.from(selection.selectedValues.value)
  console.log('Deleting:', selected)
  selection.unselectAll()
}
</script>

<template>
  <div class="task-manager">
    <h2>Task Manager</h2>
    
    <div class="task-list">
      <label
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
      >
        <input
          type="checkbox"
          :checked="selection.selectedIds.has(task.id)"
          @change="selection.toggle(task.id)"
        >
        {{ task.label }}
      </label>
    </div>
    
    <button
      v-if="selection.selectedIds.size > 0"
      class="delete-btn"
      @click="deleteSelected"
    >
      Delete {{ selection.selectedIds.size }} selected
    </button>
  </div>
</template>

<style scoped>
.task-manager {
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
}

.delete-btn {
  width: 100%;
  padding: 0.75rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
}
</style>