<script setup>
    import { Primitive } from 'reka-ui';
    import { cn } from '@/lib/utils';

    const props = defineProps({
        as: {
            type: [String, Object, Function],
            default: 'button'
        },
        asChild: {
            type: Boolean,
            default: false
        },
        class: {
            type: [String, Array, Object],
            default: undefined
        }
    });
</script>

<template>
    <Primitive
        data-slot="sidebar-group-action"
        data-sidebar="group-action"
        :as="as"
        :as-child="asChild"
        :class="
            cn(
                'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
                'after:absolute after:-inset-2 md:after:hidden',
                'group-data-[collapsible=icon]:hidden',
                props.class
            )
        ">
        <slot />
    </Primitive>
</template>
