<script setup>
import { computed } from 'vue';
import { useActiveState } from '../../composables/useActiveState';

const { activeComponent, setActive } = useActiveState();
const { __ } = wp.i18n;
// Check if this component is the active one
const isActive = computed(() => activeComponent.value === 'export');

</script>
<template>
    <div class="border-b bg-white" :class="{ active: isActive }"  @click="setActive('export')">
      <label for="importexport" class=" flex flex-row justify-between items-center p-4">
    <div class="flex flex-row items-center">
        <div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /> </svg> </div>
      <div class="flex flex-col ml-3">
        <div class="text-sm">{{ __('Export', 'respacio-houzez-import') }}</div>
        <div class="text-xs">{{ __('Export property data', 'respacio-houzez-import') }}</div>
      </div>
    </div>
      
      <div>
        <svg id="importexport" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 stroke-gray-500">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>

      </div>
      </label>
      
    </div>
</template>


<style scoped>
.active {
  background-color: blue;
  color: white;
}
</style>