import React, { useState } from "react";
import {
  Radio,
  RadioGroup as MuiRadioGroup,
  FormControl,
  FormControlLabel,
  RadioGroupProps as MuiRadioGroupProps,
} from "@mui/material";
import './radiogroup.scss';

interface RadioOption {
  value: string;
  label: string;
}

export interface RadioGroupProps extends MuiRadioGroupProps {
  options: RadioOption[];
  initialValue: string;
}

export const RadioGroup = ({
  options,
  initialValue,
  onChange,
  ...rest
}: RadioGroupProps) => {
  const [selectedValue, setSelectedValue] = useState(initialValue);

  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
    setSelectedValue(newValue);
  };

  return (
    <div className="radiogroup-container">   
       <FormControl component="fieldset">
      <MuiRadioGroup
        aria-label="radio-group"
        name="radio-group"
        value={selectedValue}
        onChange={handleRadioChange}
        {...rest}
      >
        {options.map((option) => (
          <FormControlLabel
            key={option.value}
            value={option.value}
            control={<Radio />}
            label={option.label}
          />
        ))}
      </MuiRadioGroup>
    </FormControl>
    </div>
  );
};