import React from "react";
import { RightSide, RuleViewInput } from "../types";

function RuleView({ small, rule }: RuleViewInput) {
  const getStringRight = (rightSide: RightSide[]) => {
    let result = "";
    let i = 0;
    rightSide.forEach((element) => {
      result += element.part;
      if (i + 1 < rightSide.length) {
        result += " | ";
      }
      i++;
    });
    return result;
  };
  return <div className={`${small&& 'rootRuleSmall'} rule`}>{rule.leftSymbol + " = " + getStringRight(rule.rightSide)}</div>;
}
export default RuleView;