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

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

const props = withDefaults(defineProps<UiSidebarMenuSubProps>(), {
  mode: 'default',
});

const attrs = useAttrs();

const subClass = computed(() =>
  cn(
    props.mode === 'border' &&
      '!mx-3.5 !translate-x-px !gap-1 !border-l !border-border-surface-default !px-2.5 !py-0.5',
    props.mode === 'default' &&
      '!mx-3.5 !translate-x-px !gap-1 !border-l-0 !px-2.5 !py-0.5',
    props.mode === 'indent' &&
      '!mx-0 !translate-x-0 !gap-1 !border-l-0 !pl-4 !pr-0 !py-0',
    attrs.class as string | undefined,
  ),
);

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

<template>
  <SidebarMenuSub v-bind="passthroughAttrs" :class="subClass">
    <slot />
  </SidebarMenuSub>
</template>
