import * as React from 'react';
import { MenuPicker } from './MenuPicker';
import { undefinedText } from '../PersonaCoin/styles';
const alignmentValues = [undefinedText, 'start', 'center', 'end'];
export const AlignmentPicker = (props) => {
    const { label, onSelectionChange, style } = props;
    const [selectedValue, setSelectedValue] = React.useState();
    const alignmentCollection = alignmentValues.map((value) => {
        return {
            label: value,
            value: value,
        };
    });
    return (React.createElement(MenuPicker, { style: style, prompt: label, selected: selectedValue || undefinedText, onChange: (value, index) => {
            const alignmentValue = index == 0 ? undefined : value;
            onSelectionChange(alignmentValue);
            setSelectedValue(alignmentValue);
        }, collection: alignmentCollection }));
};
//# sourceMappingURL=AlignmentPicker.js.map