<script setup lang="ts">
const { allLinks } = useNav()
const { componentsByName } = useComponents()

function getLinkToPage(pageName: string, componentName?: string) {
  const link = allLinks.find(link => link.label === pageName)
  if (!link) {
    return ''
  }
  // For the main component, add a -1 to the hash
  const hash = `#${componentName?.toLowerCase()}${componentName === pageName ? '-1' : ''}`
  return link.to + (componentName ? hash : '')
}
</script>

<template>
  <Flex col class="gap-2 lg:gap-0">
    <div v-for="(components, key) in componentsByName" :key="key">
      <Flex
        class="items-start lg:items-center gap-2 border-2 border-transparent hover:border-primary p-3 rounded-xl -mx-3 cursor-pointer"
        @click.self="navigateTo(getLinkToPage(key as any))"
      >
        <NuxtLink :to="getLinkToPage(key as any)" class="w-28 flex-shrink-0 mr-2 no-underline hover:underline">
          <Text class="w-24 flex-shrink-0 mr-2"> {{ key }}: </Text>
        </NuxtLink>

        <Flex wrap col class="gap-1 lg:flex-row">
          <Tooltip v-for="component in components" :key="component.name" :tip="component.description">
            <NuxtLink :to="getLinkToPage(key as any, component.name)">
              <Button sm class="normal-case">
                {{ component.name }}
              </Button>
            </NuxtLink>
          </Tooltip>
        </Flex>
      </Flex>
    </div>
  </Flex>
</template>
