frontPanel/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/Item/Item.tsx

import { Box, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { IconBtnAdd } from "./IconBtnAdd/IconBtnAdd";
import { AnswerItem } from "./AnswerItem/AnswerItem";
import { TagKeys, TitleKeys, TQuestionEntity, TTags } from "../../AmoCRMModal";

type ItemProps = {
  title: TitleKeys | TagKeys;
  onAddBtnClick: () => void;
  data: TQuestionEntity | TTags;
};
export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data, tagsNamesList }) => {
  const theme = useTheme();

  const titleDictionary = {
    Company: "Компания",
    Lead: "Сделка",
    Contact: "Контакты",
    Customer: "Покупатели",
  };

  const translatedTitle = titleDictionary[title];
  const selectedOptions = data[title];
  return (
    <Box
      sx={{
        width: "172px",
        display: "flex",
        flexDirection: "column",
        borderRight: `1px solid ${theme.palette.background.default}`,
      }}
    >
      <Box
        sx={{
          alignSelf: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "12px",
          backgroundColor: theme.palette.background.default,
          width: "156px",
          height: "40px",
        }}
      >
        <Typography sx={{ fontSize: "16px", fontWeight: 500 }}>
          {translatedTitle}
        </Typography>
      </Box>
      {selectedOptions &&
        selectedOptions.map((text, index) => (
          <AnswerItem
            key={text + index}
            fieldValue={"Значение поля"}
            fieldName={tagsNamesList?.[title][index] || text}
          />
        ))}

      <IconBtnAdd onAddBtnClick={onAddBtnClick} />
    </Box>
  );
};