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

export interface IDividerProps extends ViewProps {
  isInvisible?: boolean;
  height?: number;
  color?: keysTheme;
}

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

  return <StyledHr testID="divider" height={height} color={dividerColor} />;
};
