"use client"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from "react"
import { classNames } from "../../utils/classNames"

export type SeparatorProps = Pick<
  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
  "className" | "orientation" | "decorative"
>

/**
 * Visually or semantically separates content.
 */
export const Separator = forwardRef<
  ElementRef<typeof SeparatorPrimitive.Root>,
  SeparatorProps
>(function Separator(
  { className, orientation = "horizontal", decorative = true },
  ref,
) {
  return (
    <SeparatorPrimitive.Root
      className={classNames(
        "shrink-0 bg-border-1-transparent",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      decorative={decorative}
      orientation={orientation}
      ref={ref}
    />
  )
})