<template>
  <div class="color-mode-toggle">
    <button
      v-for="option in options"
      :key="option.value"
      :class="{ active: colorMode.preference === option.value }"
      @click="colorMode.preference = option.value"
    >{{ option.label }}</button>
  </div>
</template>

<script setup>
const colorMode = useColorMode()

const options = [
  { label: 'Light', value: 'light' },
  { label: 'System', value: 'system' },
  { label: 'Dark', value: 'dark' },
]
</script>

<style scoped>
.color-mode-toggle {
  display: flex;
  margin-top: 10px;
}

.color-mode-toggle button {
  flex: 1;
  padding: 4px 0;
  font-family: 'Commit Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--text-faint);
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: all 0.15s;
}

.color-mode-toggle button + button {
  border-left: none;
}

.color-mode-toggle button:hover {
  color: var(--text-dim);
}

.color-mode-toggle button.active {
  color: var(--candle);
  border-color: var(--candle);
  border-style: solid;
  background: var(--surface);
}

/* When active button is adjacent to dashed, restore left border */
.color-mode-toggle button.active + button {
  border-left: 1px dashed var(--border);
}
.color-mode-toggle button:has(+ button.active) {
  border-right: none;
}
</style>
