import Box from "@mui/material/Box";
import { IconButton, Typography, useTheme } from "@mui/material";
import EditPencil from "@icons/EditPencil";
import { FC } from "react";

type SettingItemHeaderProps = {
  title: string;
  step: number;
  setStep: () => void;
};

export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
  title,
  step,
  setStep,
}) => {
  const theme = useTheme();

  return (
    <Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Typography
          sx={{
            color: theme.palette.grey2.main,
            fontSize: "14px",
            fontWeight: 400,
          }}
        >
          {step} этап
        </Typography>
        <IconButton onClick={setStep}>
          <EditPencil
            color={theme.palette.brightPurple.main}
            width={"18px"}
            height={"18px"}
          />
        </IconButton>
      </Box>
      <Typography
        sx={{
          color: theme.palette.grey3.main,
          fontSize: "18px",
          fontWeight: 500,
          lineHeight: "1",
        }}
      >
        {title}
      </Typography>
    </Box>
  );
};