frontPanel/src/pages/ContactFormPage/ButtonSettingForms.tsx

import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Branching from "../../assets/icons/questionsPage/branching";
import { Box, useTheme } from "@mui/material";
import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon";

interface Props {
  switchState: string;
  SSHC: (data: string) => void;
}

export default function ButtonSettingForms({ SSHC, switchState }: Props) {
  const theme = useTheme();
  const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
    {
      icon: (
        <SettingIcon
          color={
            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Настройки",
      value: "setting",
    },
    {
      icon: (
        <Branching
          color={
            switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Ветвление",
      value: "branching",
    },
    {
      icon: (
        <SupplementIcon
          color={
            switchState === "supplement" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Добавить шаг формы",
      value: "supplement",
    },
  ];

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        width: "100%",
        background: "#f2f3f7",
      }}
    >
      <Box
        sx={{
          padding: "20px",
          display: "flex",
          gap: "10px",
        }}
      >
        {buttonSetting.map((e, i) => (
          <MiniButtonSetting
            key={i}
            onClick={() => {
              SSHC(e.value);
            }}
            sx={{
              backgroundColor:
                switchState === e.value
                  ? theme.palette.brightPurple.main
                  : "transparent",
              color:
                switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
            }}
          >
            {e.icon}
            {e.title}
          </MiniButtonSetting>
        ))}
      </Box>
    </Box>
  );
}