import {
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  SelectChangeEvent,
  Typography,
} from "@mui/material";
import React from "react";

// TODO: change MenuItem values to something meaningful

interface Props {
  group: string;
  setGroup: (group: string) => void;
}

const groups = ["Favorites", "Team"];

const GroupSelect: React.FC<Props> = ({ group, setGroup }) => {
  const handleChange = (e: SelectChangeEvent) => {
    setGroup(e.target.value);
  };

  return (
    <FormControl variant="filled" fullWidth>
      <InputLabel id="group-select-label">
        <Typography color="black">Group</Typography>
      </InputLabel>
      <Select
        labelId="group-select-label"
        id="group-select"
        value={group}
        label="Group"
        onChange={handleChange}
      >
        {groups.map((group, i) => (
          <MenuItem value={group} key={i}>
            <Typography color="black">{group}</Typography>
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

export default GroupSelect;