import { Dispatch, SetStateAction, useState } from "react";
import { List, ListItem, Typography, useMediaQuery, useTheme } from "@mui/material";

type Props = {
  setType: Dispatch<SetStateAction<"templ" | "squiz" | "reducer">>;
  _mocsk_: { name: string; type: "templ" | "squiz" | "reducer" }[];
};

export default function CustomRadioButtons({ setType, _mocsk_ }: Props) {
  const theme = useTheme();
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const [active, setActive] = useState<number>(0);

  const activeType = (index: number, type: "templ" | "squiz" | "reducer") => {
    setActive(index);
    setType(type);
  };

  return (
    <List
      sx={{
        marginLeft: "-10px",
        width: upSm ? "430px" : "auto",
        display: "flex",
        flexWrap: upSm ? "" : "wrap",
        fontWeight: "500",
        fontSize: " 16px",
        whiteSpace: "nowrap",
      }}
    >
      {_mocsk_.map(({ name, type }, index) =>
        active === index ? (
          <ListItem key={type} onClick={() => activeType(index, type)} sx={{ color: "#7E2AEA", cursor: "pointer" }}>
            <Typography component="span" sx={{ borderBottom: "1px solid #7E2AEA", fontSize: " 16px" }}>
              {name}
            </Typography>
          </ListItem>
        ) : (
          <ListItem key={type} onClick={() => activeType(index, type)} sx={{ cursor: "pointer" }}>
            {name}
          </ListItem>
        )
      )}
    </List>
  );
}