<script setup lang="ts">
import { ref } from 'vue'

import JsonKeyValueDisplay from '@/components/nodes/JsonKeyValueDisplay.vue'
import { Button } from '@/components/ui/button'
import { getRoleColorClass } from '@/utils/roleColors'

const props = defineProps<{
  label: string
  data: unknown
}>()

const isExpanded = ref(false)
</script>

<template>
  <div class="contents">
    <div class="flex-none">
      <span
        class="font-medium text-xs uppercase leading-8 py-0.5 px-2 rounded-sm"
        :class="getRoleColorClass(label)"
      >
        {{ label }}
      </span>
    </div>

    <div class="flex-1 truncate flex items-center" v-if="!isExpanded">
      <span class="text-sm text-muted-foreground pt-[5px] min-w-0 truncate">
        {{ JSON.stringify(data) }}
      </span>
    </div>
    <div class="flex-1 pt-[1px]" v-else>
      <JsonKeyValueDisplay :data="(data as Record<string, any>)" />
    </div>

    <div class="flex">
      <Button @click="isExpanded = !isExpanded" variant="ghost" size="icon-sm">
        <i
          class="dku-icon-chevron-right-16 transition-transform duration-200"
          :class="{ 'rotate-90': isExpanded }"
        />
      </Button>
    </div>
  </div>
</template>
