import { Text } from "@front10/base-elements";
import { Context } from "@front10/utils";
import React, { useContext } from "react";

interface Props {
  content?: string;
  paddingRight?: string;
  paddingLeft?: string;
}

/**
 * ## Example
 * ```js
<Separator
  content="|"
/> 
 * ```
 */

function Separator({
  content = "|",
  paddingRight = "1",
  paddingLeft = "1",
  ...props
}: Props) {
  const { translate } = useContext(Context);

  return (
    <Text paddingLeft={paddingLeft} paddingRight={paddingRight} {...props}>
      {content !== "" && translate(`cmp-separator-${content}`, content)}
    </Text>
  );
}

Separator.componentName = "Separator";

export default Separator;