Separator

import { Separator as BaseSeparator } from "@base-ui-components/react/separator";
import { css } from "@linaria/core";
import type { CSSProperties } from "react";
 
interface Props {
  text?: string;
  orientation?: "horizontal" | "vertical";
  className?: string;
  style?: CSSProperties;
}
 
const separatorStyles = css`
  background-color: var(--debase__color__line);
  width: 100%;
 
  &[data-orientation="horizontal"] {
    height: 1px;
    width: 100%;
    margin: var(--debase__spacing__x05) 0;
  }
 
  &[data-orientation="vertical"] {
    height: 100%;
    width: 1px;
  }
`;
 
const withTextContainer = css`
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--debase__spacing__x05);
  margin: var(--debase__spacing__x05) 0;
`;
 
const textStyle = css`
  color: var(--debase__color__text-sub);
  font-size: var(--debase__font-size__small);
  font-family: var(--debase__font-family);
  padding: 0 var(--debase__spacing__x05);
`;
 
export default function Separator({
  text,
  orientation = "horizontal",
  className,
  style,
}: Props) {
  if (text && orientation === "horizontal") {
    return (
      <div className={withTextContainer} style={style}>
        <BaseSeparator
          orientation="horizontal"
          className={`${separatorStyles} ${className || ""}`}
        />
        <span className={textStyle}>{text}</span>
        <BaseSeparator
          orientation="horizontal"
          className={`${separatorStyles} ${className || ""}`}
        />
      </div>
    );
  }
 
  return (
    <BaseSeparator
      orientation={orientation}
      className={`${separatorStyles} ${className || ""}`}
      style={style}
    />
  );
}