// Extract Composable
/* logic separate from UI */

import { ref, watch } from 'vue';

export function useExampleLogic(initialValue: number) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };
  const decrement = () => {
    count.value--;
  };

  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  });

  return { count, increment, decrement };
}

<template>
  <div class="flex flex-col items-center justify-center">
    <button
      @click="decrement"
      class="bg-blue-500 text-white p-2 rounded"
    >
      Decrement
    </button>
    <p class="text-lg my-4">Count: {{ count }}</p>
    <button
      @click="increment"
      class="bg-green-500 text-white p-2 rounded"
    >
      Increment
    </button>
  </div>
</template>

<script setup lang="ts">
  import { useExampleLogic } from './useExampleLogic';
  const { count, increment, decrement } = useExampleLogic(0);
</script>