import * as React from 'react';
import { Slot } from '@radix-ui/react-slot'; // Import Slot for asChild functionality
import { cn } from '@/lib/utils';

// Props should be a union of HTMLDivElement attributes (for Slot) and HTMLHRElement attributes (for hr)
type SeparatorElement = HTMLDivElement | HTMLHRElement;

interface SeparatorProps extends React.HTMLAttributes<SeparatorElement> {
  asChild?: boolean;
  orientation?: 'horizontal' | 'vertical';
}

const Separator = React.forwardRef<
  SeparatorElement, // Ref can be either HTMLDivElement or HTMLHRElement
  SeparatorProps
>((props, ref) => {
  const { asChild = false, orientation = 'horizontal', className, ...rest } = props;

  const separatorClasses = cn(
    orientation === 'horizontal'
      ? 'h-px w-full bg-gray-200 dark:bg-gray-600'
      : 'w-px h-full bg-gray-200 dark:bg-gray-600',
    className
  );

  if (asChild) {
    // If asChild is true, render Slot. The Slot will render its child and merge props.
    // The ref will be passed to the child.
    return <Slot ref={ref as React.Ref<HTMLDivElement>} className={separatorClasses} {...rest} />;
  } else {
    // If asChild is false, render an <hr> as per the original component's default.
    // We cast ref and props to HTMLHRElement.
    return (
      <hr
        ref={ref as React.Ref<HTMLHRElement>}
        className={separatorClasses}
        {...rest as React.HTMLAttributes<HTMLHRElement>}
      />
    );
  }
});
Separator.displayName = 'Separator';

export { Separator };