import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { IconButton, TextField } from '@fluentui/react';
import { memo } from 'react';
import { dropdownStyles } from '../styles.js';
import { useHandleColumnChange } from './ColumnSpread.hooks.js';
import { Container, icons } from './ColumnSpread.styles.js';
/**
 * Provides a column dropdown and delete button for editing a list of columns.
 */ export const ColumnSpread = /*#__PURE__*/ memo(function ColumnSpread({ column , onChange , onDelete  }) {
    const handleColumnChange = useHandleColumnChange(onChange);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(TextField, {
                value: column,
                onChange: handleColumnChange,
                styles: dropdownStyles
            }),
            /*#__PURE__*/ _jsx(IconButton, {
                title: 'Remove this column',
                iconProps: icons.delete,
                onClick: onDelete
            })
        ]
    });
});
