<template>
  <div class="backup-card card-glow">
    <div class="card-header">
      <h2 class="card-title">Backup</h2>
      <span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Dossiers</span>
    </div>

    <div class="backup-list">
      <button
        v-for="item in folders"
        :key="item.name"
        type="button"
        class="backup-btn"
        :class="{ 'backup-btn-active': active === item.name }"
        @click="select(item.name)"
      >
        <div class="flex items-center gap-2.5">
          <IconifyIcon :icon="item.icon" class="text-base text-m-accent" />
          <span class="font-display text-sm font-semibold uppercase tracking-wide">
            {{ item.name }}
          </span>
        </div>
        <IconifyIcon
          icon="mdi:chevron-right"
          class="text-lg text-m-muted transition-transform duration-200"
          :class="{ 'translate-x-0.5 !text-m-accent': active === item.name }"
        />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Icon as IconifyIcon } from "@iconify/vue"
import backupOptions from "~/server/config/backup-options.json"

const emit = defineEmits(["select"])
const active = ref<string | null>(null)
const folders = backupOptions as Array<{ name: string; icon: string }>

const select = (name: string) => {
  active.value = name
  emit("select", name)
}
</script>

<style scoped>
.backup-card {
  background: rgb(var(--m-secondary));
  border-radius: 12px;
  padding: 1.25rem;
  transition: background-color 0.4s ease;
}

.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(var(--m-text));
}

.backup-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.backup-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  background: rgb(var(--m-tertiary));
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgb(var(--m-text));
}

.backup-btn:hover {
  border-color: rgb(var(--m-accent) / 0.15);
  background: rgb(var(--m-accent) / 0.06);
}

.backup-btn-active {
  border-color: rgb(var(--m-accent) / 0.25);
  background: rgb(var(--m-accent) / 0.08);
  box-shadow: 0 0 12px -4px rgb(var(--m-accent) / 0.15);
}
</style>
