import React from 'react';
import { DropDownArrow } from '@wix/wix-ui-icons-common/system';
import { DATA_HOOK, SIZE } from './InputShell.constants';
import { st, classes } from './InputShell.st.css.js';
import Box from '../Box';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
/** A wrapper component that has a style of an input component */
const InputShell = props => {
    const icons = useIcons('InputShell', {
        DropDownArrow,
    });
    const { as: Component = 'div', children, menuArrow, dataHook, focused = 'auto', onClick, placeholder, size = SIZE.medium, ...rest } = props;
    const shouldApplyPlaceholderClass = !children && !!placeholder;
    return (React.createElement(Component, { ...rest, "data-hook": dataHook, className: st(classes.root, {
            menuArrow: props.menuArrow,
            disabled: props.as === 'button' ? props.disabled : false,
            focused: String(focused),
            size,
            placeholder: shouldApplyPlaceholderClass,
        }), onClick: onClick },
        React.createElement("div", { className: st(classes.content) },
            children ? (children) : (React.createElement("div", { "data-hook": DATA_HOOK.placeholder, className: st({ placeholder }) }, placeholder)),
            menuArrow && (React.createElement(Box, { dataHook: DATA_HOOK.menuArrow, className: st(classes.suffix) },
                React.createElement(icons.DropDownArrow, null))))));
};
InputShell.displayName = 'InputShell';
export default InputShell;
//# sourceMappingURL=InputShell.js.map