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

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

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

const attrs = useAttrs();

const triggerClass = computed(() =>
  cn(
    'rounded-sm p-2',
    'group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:p-0',
    'text-content-on-surface-primary',
    attrs.class as string | undefined,
  ),
);
</script>

<template>
  <UiTooltip
    v-if="props.tooltip"
    :content="props.tooltip"
    side="right"
    align="center"
  >
    <SidebarTrigger :aria-label="props.ariaLabel" :class="triggerClass" />
  </UiTooltip>
  <SidebarTrigger v-else :aria-label="props.ariaLabel" :class="triggerClass" />
</template>
