<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 === 'image');

</script>
<template>
    <div class="border-b bg-white" :class="{ active: isActive }"  @click="setActive('image')">
      <label for="importexport" class=" flex flex-row justify-between items-center p-4">
    <div class="flex flex-row items-center">
        <div class="p-0">         
          <svg class="w-6 h-6" viewBox="-2.4 -2.4 28.80 28.80" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="imageIconTitle" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="currentColor" transform="matrix(1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"><rect width="18" height="18" x="3" y="3"></rect> <path stroke-linecap="round" d="M3 14l4-4 11 11"></path> <circle cx="13.5" cy="7.5" r="2.5"></circle> <path stroke-linecap="round" d="M13.5 16.5L21 9"></path> </g>
          </svg>
        </div>
      <div class="flex flex-col ml-3">
        <div class="text-sm">{{ __('Image', 'respacio-houzez-import') }}</div>
        <div class="text-xs">{{ __('Select Image Formats', '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>