import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";

export default function NationalMapRadioBtn({
  onPercentageTypeChange,
  selectedPercentageType,
}) {
  const handleChange = (event) => {
    onPercentageTypeChange(event.target.value);
  };

  return (
    <FormControl>
      <RadioGroup
        sx={{
          justifyContent: "center",
        }}
        aria-labelledby="percentage-type-radio-buttons-group"
        name="percentage-type-radio-buttons-group"
        value={selectedPercentageType}
        onChange={handleChange}
        row
      >
        <FormControlLabel
          value="hatching"
          control={<Radio />}
          label="مانده در سالن"
        />
        <FormControlLabel
          value="active"
          control={<Radio />}
          label="آماده کشتار"
        />
      </RadioGroup>
    </FormControl>
  );
}