<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import { useSettingsStore } from "@/stores/SettingsStore";
import CheckoutFields from "./WooCommerce/CheckoutFields.vue";
import ProductPrefixWithSKU from "./WooCommerce/ProductPrefixWithSKU.vue";
const settingsStore = useSettingsStore();
const handleUpdate = () => {
  settingsStore.updateWCSettings();
};
</script>

<template>
  <SettingsTab>
    <template #title>
      <div>WooCommerce</div>
    </template>
    <template #description>
      Fatura Entegratör'ü WooCommerce ile daha verimli kullanmak için
      ayarlarınızı buradan düzenleyebilirsiniz.
    </template>
    <div class="flex flex-col gap-4 divide-y">
      <CheckoutFields />
      <ProductPrefixWithSKU />
    </div>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
