<script setup lang="ts">
import { cn } from '@comfyorg/tailwind-utils'

const {
  segments,
  segmentClass = 'px-6',
  textClass = 'text-2xl sm:text-3xl lg:text-5xl',
  sizeClass = ''
} = defineProps<{
  segments: Array<{ text?: string; logoSrc?: string; logoAlt?: string }>
  segmentClass?: string
  textClass?: string
  sizeClass?: string
}>()
</script>

<template>
  <div
    :class="
      cn(
        'font-formula-narrow flex h-11 items-stretch font-semibold **:select-none sm:h-auto',
        sizeClass
      )
    "
  >
    <img
      src="/icons/node-left.svg"
      alt=""
      class="-mx-px h-full w-auto self-stretch"
      aria-hidden="true"
    />

    <template
      v-for="(segment, i) in segments"
      :key="segment.text || segment.logoSrc || i"
    >
      <img
        v-if="i > 0"
        src="/icons/node-union.svg"
        alt=""
        class="-mx-px h-full w-auto self-stretch"
        aria-hidden="true"
      />
      <span
        :class="
          cn(
            'bg-primary-comfy-yellow text-primary-comfy-ink flex items-center justify-center py-1.5 transition-all duration-300 sm:py-3 lg:py-5',
            segmentClass
          )
        "
      >
        <img
          v-if="segment.logoSrc"
          :src="segment.logoSrc"
          :alt="segment.logoAlt ?? ''"
          class="inline-block h-5 brightness-0 transition-all duration-300 sm:h-7 lg:h-10"
        />
        <span
          v-else
          :class="
            cn(
              'inline-block translate-y-1 font-bold whitespace-nowrap transition-all duration-300',
              textClass
            )
          "
        >
          {{ segment.text }}
        </span>
      </span>
    </template>

    <img
      src="/icons/node-right.svg"
      alt=""
      class="-mx-px h-full w-auto self-stretch"
      aria-hidden="true"
    />
  </div>
</template>
