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

import VerticalConnector from './VerticalConnector.vue'
import type { ConnectorVariant } from '@/types/explorer'

const props = defineProps<{
  color: string
  hasChildren: boolean
  isCollapsed: boolean
  highlighted: boolean
  icon: string
}>()

const lineVariant = computed((): ConnectorVariant => (props.highlighted ? 'highlighted' : 'filled'))
</script>

<template>
  <div class="flex flex-col items-center pt-[4px] pl-[2px] mr-[4px] min-h-[24px]">
    <!-- Color block -->
    <div
      :style="`background-color: ${color}`"
      class="flex-none h-[20px] w-[20px] rounded-sm cursor-pointer flex items-center justify-center text-white/90"
    >
      <i :class="`${icon}-16`" />
    </div>

    <!-- Vertical line extension (only when expanded with children) -->
    <div
      v-if="hasChildren && !isCollapsed"
      class="flex-1 h-[calc(100%-20px)] relative left-[-0.5px]"
      :class="{ 'left-[-1px]': highlighted }"
    >
      <VerticalConnector :variant="lineVariant" />
    </div>
  </div>
</template>
