<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { SidebarHeader } from '@/components/core/sidebar';
import { cn, omitClass } from '@/lib/utils';
import UiSidebarTrigger from './UiSidebarTrigger.vue';
import type { UiSidebarHeaderProps } from './types';

defineOptions({
  name: 'UiSidebarHeader',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiSidebarHeaderProps>(), {
  tooltip: '',
  ariaLabel: 'Toggle sidebar',
});

const attrs = useAttrs();

const headerClass = computed(() => cn(attrs.class as string | undefined));

const passthroughAttrs = computed(() =>
  omitClass(attrs as Record<string, unknown>),
);
</script>

<template>
  <SidebarHeader v-bind="passthroughAttrs" :class="headerClass">
    <div
      class="flex w-full items-center rounded-sm p-2 text-content-on-surface-primary group-data-[collapsible=icon]:justify-center"
    >
      <div
        class="flex shrink-0 grow items-center gap-2 group-data-[collapsible=icon]:hidden"
      >
        <slot name="logo"> </slot>
        <span v-if="$slots.default" class="min-w-0 truncate body-16-medium">
          <slot />
        </span>
      </div>

      <UiSidebarTrigger
        class="ml-auto group-data-[collapsible=icon]:ml-0"
        :tooltip="props.tooltip"
        :aria-label="props.ariaLabel"
      />
    </div>
  </SidebarHeader>
</template>
