<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Settings" title="Client and system configuration" subtitle="Company logo, currency, timezone, time format, payroll, attendance, SMTP, SMS, and WhatsApp API settings." action="Save Settings" />
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
      <h3 class="text-xl font-black">{{ tenant.name }}</h3>
      <p class="mt-1 text-sm text-slate-500">{{ tenant.package }} package · {{ tenant.status }}</p>
      <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div v-for="(value, key) in settings" :key="key" class="rounded-2xl bg-slate-50 p-4">
          <p class="text-xs font-bold uppercase tracking-wide text-slate-400">{{ String(key).replaceAll('_', ' ') }}</p>
          <p class="mt-2 font-black">{{ value }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const tenant = ref({});
const settings = ref({});

onMounted(async () => {
  const data = await getJson('/settings');
  tenant.value = data.tenant;
  settings.value = data.settings;
});
</script>
