import { styled } from "../../theme";

const StyledEllipsisDivider = styled("div", {
  flexGrow: 1,
  position: "relative",
  ml: "$2",
  minWidth: "$3",
  height: "$5",

  "&::after": {
    letterSpacing: "$2",
    fontSize: "$2",
    lineHeight: "$5",
    width: "100%",
    overflow: "hidden",
    whiteSpace: "nowrap",
    position: "absolute",
    bottom: 0,
    color: "$off-white-18",
  },
});

const repeatDots = (count?: number) => {
  if (!count || count < 1) {
    return "";
  }

  return ".".repeat(count);
};

export const EllipsisDivider: React.FC<{ noOfDots?: number }> = ({ noOfDots }) => {
  return <StyledEllipsisDivider css={{ "&::after": { content: repeatDots(noOfDots) } }} />;
};