import { Box, useMediaQuery, useTheme } from "@mui/material";
import { FC, useState } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";

type IntegrationStep2Props = {
  handlePrevStep: () => void;
  handleNextStep: () => void;
};

export const IntegrationStep2: FC<IntegrationStep2Props> = ({
  handlePrevStep,
  handleNextStep,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const [selectedItem, setSelectedItem] = useState<number | null>(null);
  const itemsMock = [
    "Ангелина Полякова",
    "Петр Иванов",
    "Алексей Звягинцев",
    "Никита Стрельцов",
    "Инна Ким",
    "Дмитрий Морозов",
    "Арсен Тадевосян",
  ];

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box sx={{ width: "100%", marginTop: "20px" }}>
        <CustomSelect
          selectedItem={selectedItem}
          items={itemsMock}
          setSelectedItem={setSelectedItem}
        />
      </Box>
      <StepButtonsBlock
        handleNextStep={handleNextStep}
        handlePrevStep={handlePrevStep}
      />
    </Box>
  );
};