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

type Props = {
  setType: React.Dispatch<React.SetStateAction<string>>;
  _mocsk_: { name: string; type: string }[];
};

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

  const activeType = (index: number, type: string) => {
    setActive(index);
    setType(type);
  };

  return (
    <List
      sx={{
        marginLeft: "-10px",
        width: "430px",
        display: "flex",
        fontWeight: "500",
        fontSize: " 16px",
        whiteSpace: "nowrap",
        overflow: upSm ? "" : "hidden",
      }}
    >
      {_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>
  );
};