<script setup lang="ts">
import { Separator as SeparatorRoot } from "reka-ui";
import { cn } from "@/lib/utils";

interface Props {
  class?: string;
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  orientation: "horizontal",
  decorative: true,
});
</script>

<template>
  <SeparatorRoot
    :orientation="orientation"
    :decorative="decorative"
    :class="
      cn(
        'bg-border shrink-0',
        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
        props.class,
      )
    "
  />
</template>
