<script lang="ts">
  import { cn } from '$lib/utils'

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

  let {
    orientation = 'horizontal',
    decorative = true,
    class: className,
    ...rest
  }: Props = $props()
</script>

<div
  data-slot="separator-root"
  role={decorative ? 'none' : 'separator'}
  aria-orientation={decorative ? undefined : orientation}
  data-orientation={orientation}
  class={cn(
    'bg-border shrink-0',
    orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
    className
  )}
  {...rest}
></div>
