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