<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cn, omitClass } from '@/lib/utils';

defineOptions({ inheritAttrs: false });

const attrs = useAttrs();
const passthroughAttrs = computed(() =>
  omitClass(attrs as Record<string, unknown>),
);
const attrClass = computed(() => (attrs.class as string | undefined) ?? '');
</script>

<template>
  <div
    v-bind="passthroughAttrs"
    data-slot="sidebar-content"
    data-sidebar="content"
    :class="
      cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2 group-data-[collapsible=icon]:overflow-hidden',
        attrClass,
      )
    "
  >
    <slot />
  </div>
</template>
