<script setup>
import { storeToRefs } from "pinia";
import { useCacheStore } from "@/stores/cacheStore";
import ActionButton from "@/components/ActionButton.vue";

const cacheStore = useCacheStore();
const { loading } = storeToRefs(cacheStore);

// ✅ Clear cache handler
const clearCache = async () => {
  await cacheStore.clearCache();
};
</script>

<template>
  <VCard title="Cache Management">
    <VCardText>
      <p class="text-body2 text-gray-600 mb-4">
        Clear all cached data from your browser. This will remove all stored
        information including forms, settings, and other data.
      </p>
      <ActionButton
        :label="loading ? 'Clearing...' : 'Clear Cache'"
        icon="pi pi-trash"
        :loading="loading"
        @click="clearCache"
      />
    </VCardText>
  </VCard>
</template>

<style scoped>
:deep(.v-card) {
  border-radius: 12px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

:deep(.v-card__title) {
  padding: 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1a202c;
}

:deep(.v-card__text) {
  padding: 1.5rem;
}

.text-gray-600 {
  color: #64748b;
  line-height: 1.6;
}
</style>
