import { forwardRef } from "react";
import * as SeperatorPrimitive from "@radix-ui/react-separator";
import { pxToRem } from "../../utils";
import { styled } from "../../theme";
import type { WithTestId } from "../../types";
import type { ColorKey } from "../../theme";

const StyledSeparator = styled(SeperatorPrimitive.Root, {
  // TODO : replace it with the correct color token when the theme is mature
  backgroundColor: "#000",
  "&[data-orientation=vertical]": { height: "100%", width: pxToRem(1) },
  "&[data-orientation=horizontal]": { width: "100%", height: pxToRem(1) },
});

interface SeparatorProps extends WithTestId<React.ComponentProps<typeof StyledSeparator>> {
  color?: ColorKey;
}

export const Separator = forwardRef<HTMLDivElement, SeparatorProps>((props, ref) => {
  const { color = "$off-white-9", ...rest } = props;
  return <StyledSeparator ref={ref} css={{ backgroundColor: color }} {...rest} />;
});

Separator.displayName = "Separator";

export default Separator;