import { Box } from "@mui/material";
import { CustomRadioGroup } from "../../../../../../components/CustomRadioGroup/CustomRadioGroup";
import { StepButtonsBlock } from "../../StepButtonsBlock";
import { FC } from "react";
import { MinifiedData, TagKeys } from "../../types";

type ItemsSelectionViewProps = {
  items: MinifiedData[] | [];
  selectedItemId?: string | null;
  setSelectedItem: (value: string | null) => void;
  handleScroll?: () => void;
  activeScope: TagKeys;
};

export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
  items,
  selectedItemId,
  setSelectedItem,
  handleScroll,
  activeScope,
}) => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: "20px",
          flexGrow: 1,
          width: "100%",
          height: "346px",
        }}
      >
        <CustomRadioGroup
          items={items}
          selectedItemId={selectedItemId}
          setSelectedItem={setSelectedItem}
          handleScroll={handleScroll}
          activeScope={activeScope}
        />
      </Box>
    </Box>
  );
};
