import React, { FunctionComponent } from "react";
import { StyledHr } from "./styles";
import { keysTheme, theme } from "data/dataMx";

export interface IDividerProps {
  isInvisible?: boolean;
  height?: string;
  color?: keysTheme;
}

export const AtomDivider: FunctionComponent<IDividerProps> = ({
  isInvisible = false,
  height = "4px",
  color = "neutral400",
}) => {
  const dividerColor = isInvisible ? "transparent" : color;

  return <StyledHr height={height} color={theme[dividerColor]} />;
};
