import * as React from "react";

export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "horizontal" | "vertical";
}

export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
  ({ className = "", orientation = "horizontal", role = "separator", ...props }, ref) => {
    const base =
      orientation === "vertical"
        ? "w-px h-full"
        : "h-px w-full";

    const color = "bg-slate-200";

    return (
      <div
        ref={ref}
        role={role}
        aria-orientation={orientation}
        className={`${base} ${color} ${className}`}
        {...props}
      />
    );
  }
);
Separator.displayName = "Separator";

export default Separator;
