import * as React from "react";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";

export default function ColorToggleButton({
  btnName1,
  btnName2,
  className,
}) {
  const [alignment, setAlignment] = React.useState(btnName1);

  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment);
  };

  return (
    <ToggleButtonGroup
      color="primary"
      value={alignment}
      exclusive
      onChange={handleChange}
      aria-label="Platform"
      className={className}
    >
      <ToggleButton value={btnName1}>{btnName1}</ToggleButton>
      <ToggleButton value={btnName2}>{btnName2}</ToggleButton>
    </ToggleButtonGroup>
  );
}