import styled from "@emotion/styled";
import React from "react";

import Divider from "./Divider";

type SpaceProps = {
  spacing?: number;
};

const shouldForwardProp = (prop: string) =>
  prop !== "spacing" && prop !== "inline";

const Root = styled("div")({
  width: "100%",
});

type SpacerProps = SpaceProps & {
  /**
   * Displays the dividing line
   */
  withDivider?: boolean;
};

const Space = styled("div", { shouldForwardProp })<SpaceProps>(
  ({ spacing, theme }) => ({
    width: "100%",
    height: theme.spacing(spacing === undefined ? 1 : spacing),
  }),
);

const Spacer: React.FC<SpacerProps> = (props) => {
  const { spacing, withDivider } = props;

  if (!withDivider) {
    const spaceSize = spacing === undefined ? 2 : spacing;
    return <Space spacing={spaceSize} />;
  }

  const spaceSize = spacing === undefined ? 1 : spacing;

  return (
    <Root>
      <Space spacing={spaceSize} />
      {withDivider && <Divider />}
      <Space spacing={spaceSize} />
    </Root>
  );
};

export default Spacer;