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

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

const props = withDefaults(defineProps<UiSidebarPopoverMenuProps>(), {
  label: '',
  showFooterSeparator: true,
});

const attrs = useAttrs();

const menuClass = computed(() =>
  cn(
    'bg-background-surface-secondary rounded-md text-content-on-surface-primary p-1 shadow-md',
    attrs.class as string | undefined,
  ),
);

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

<template>
  <div
    v-bind="passthroughAttrs"
    data-slot="sidebar-popover-menu"
    :class="menuClass"
  >
    <div
      v-if="props.label"
      class="px-2 py-1.5 body-14-regular text-content-on-surface-muted"
    >
      {{ props.label }}
    </div>

    <div>
      <slot />
    </div>

    <div
      v-if="$slots.footer"
      :class="
        cn(
          props.showFooterSeparator && 'border-t border-border-surface-default',
          !props.showFooterSeparator && 'px-2 pb-2',
        )
      "
    >
      <slot name="footer" />
    </div>
  </div>
</template>
