import React, { cloneElement, forwardRef, ReactElement } from 'react';
import { SegmentedButtonProps } from './segmented-buttons.types';

export const SegmentedButtons = forwardRef<
    HTMLDivElement,
    SegmentedButtonProps
>(({ children, ...props }, ref) => {
    if (children.length <= 1) {
        throw 'You must build segmented button with 2 or more buttton';
    }

    const buttons = children.map((button: ReactElement, index) => {
        const classes =
            `m3-button-segment ${button.props.className ?? ''}`.trimEnd();
        return cloneElement(button, {
            className: classes,
            key: index,
        });
    });

    return (
        <div
            className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
            ref={ref}
        >
            {buttons}
        </div>
    );
});