import { ToggleButton as MuiToggleButton, ToggleButtonProps as MuiToggleButtonProps, ToggleButtonGroup } from "@mui/material";
import React from "react";
import './toggle-button.scss';


export interface ToggleButtonData {
    label?: string | number | React.ReactNode;
    value: string | number;
}

export interface ToggleButtonProps extends MuiToggleButtonProps {
    data: ToggleButtonData[];
    defaultValue?: string | number;

}
const ToggleButton = ({ data, defaultValue }: ToggleButtonProps) => {

    const [alignment, setAlignment] = React.useState(defaultValue ? defaultValue : '' );

    const handleChange = (
        event: React.MouseEvent<HTMLElement>,
        newAlignment: string,
    ) => {
        setAlignment(newAlignment);
    };
    return (
        <div className="toggle-button-container">
            <ToggleButtonGroup
                color="primary"
                value={alignment}
                exclusive
                onChange={handleChange}
            >
                {data?.map((item, index) => (
                    <MuiToggleButton value={item.value}>{item.label}</MuiToggleButton>
                ))}
            </ToggleButtonGroup>
        </div>

    )
}

export default ToggleButton