<script setup lang="ts">
import { StatusItemType } from '~/typs/clouds'
const props = defineProps<{
  items: Array<StatusItemType>
  title: string
}>()
const items = ref(props.items as Array<StatusItemType>)
const on_item = (it: any) => {
  items.value = items.value.map((i: StatusItemType) => ({ ...i, isOpen: i.title !== it.title ? false : !i.isOpen }))
}
</script>
<template>
  <div class="container mx-auto px-2 py-2">
    <div id="srvcstatus" class="text-3xl bg-light-500 p-3 rounded-xl">
      {{ props.title }}
    </div>
    <div class="leading-loose text-lg mt-6">
      <div v-for="item in items" :key="item.title">
        <div>
          <button
            class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
            @click="on_item(item)"
          >
            <!-- Specs has it that only one component can be open at a time and also you should be able to toggle the open state of the active component too -->
            <div>{{ item.title }}</div>
            <svg v-show="!item.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
              <path
                class="heroicon-ui"
                d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z"
              />
            </svg>
            <svg v-show="item.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
              <path
                class="heroicon-ui"
                d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z"
              />
            </svg>
          </button>
          <div v-show="item.isOpen" class="text-gray-700 text-sm mt-2">
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
