<script setup>
import {ref} from 'vue';
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 === 'userregistration');


</script>
<template>
  <div class="border-b bg-white " :class="{ active: isActive }"  @click="setActive('userregistration')">
    <label for="openstatus" 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="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"/>
          </svg>
        </div>
        <div class="flex flex-col ml-3">
          <div class="text-sm">{{ __('Connect', 'respacio-houzez-import') }}</div>
          <div class="text-xs">{{ __('Connect with CRM to manage properties', 'respacio-houzez-import') }}</div>
        </div>
      </div>

      <div>
        <svg id="openstatus" 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>