import { SegmentedControl, SegmentedControlProps } from "@mantine/core";

export type BaseSegmentedControlProps<T> = Omit<
    SegmentedControlProps,
    "onChange" | "value" | "data"
> & {
    onChange?: (value: T) => void;
    value?: T;
    data: { label: string; value: T }[];
};

const BaseSegmentedControl = <T extends string | number>(
    props: BaseSegmentedControlProps<T>
) => {
    const handleChange = (value: string) => {
        const numValue = Number(value);
        const convertedValue = isNaN(numValue) ? (value as T) : (numValue as T);
        props.onChange?.(convertedValue);
    };

    return (
        <SegmentedControl
            {...props}
            onChange={handleChange}
            value={String(props.value)}
            data={props.data.map(item => ({
                ...item,
                value: item.value.toString(),
            }))}
        />
    );
};

export default BaseSegmentedControl;
