/* eslint-disable @typescript-eslint/no-explicit-any */
import { Box } from "@mui/material";
import { isObject } from "lodash";

interface RowProps {
  rowContent: string;
  error: boolean;
  click: any;
  setModalVisible?: any;
}
export const RowContent = ({
  rowContent,
  error,
  click,
  setModalVisible,
}: RowProps) => {
  return (
    <Box
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        click(e);
        setModalVisible(false);
      }}
      // onClick={() => handleAddNewRow("Below", index)}
      sx={{
        marginBottom: "5px",
        padding: "10px 10px",
        ":hover": {
          background: error ? "red" : "#e1f1f1",
        },
      }}
    >
      {rowContent}
    </Box>
  );
};

export const convertStyles = (stylesArray = []) => {
  if (Array.isArray(stylesArray[0])) {
    return stylesArray
      ?.map((styles) => {
        if (Array.isArray(styles)) {
          return styles?.map((style) => {
            if (style && isObject(style)) {
              Object.entries(style)
                .map(([key, value]) => `${key}: ${value};`)
                .join(" ");
            }
          });
        }
        return [];
      })
      .flat()
      .join(" ");
  }
};
