import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
const inputStyle = {
    padding: 16,
    border: 'none',
    outline: 'none',
    borderRadius: 4,
    minWidth: 35,
    fontSize: 16,
    background: 'var(--background)',
};
const backgroundStyle = (focused, fullWidth) => {
    return {
        padding: 2,
        background: focused
            ? 'var(--ifm-color-primary)'
            : 'var(--ifm-font-color-base)',
        display: fullWidth ? 'block' : 'inline-block',
        transition: '0.2s background-color',
        borderRadius: 7,
        overflow: 'hidden',
        width: fullWidth ? '100%' : undefined,
    };
};
export const CoolInput = ({ style, fullWidth, ...props }) => {
    const [focus, setFocused] = useState(false);
    const onFocus = useCallback(() => {
        setFocused(true);
    }, [setFocused]);
    const onBlur = useCallback(() => {
        setFocused(false);
    }, [setFocused]);
    return (_jsx("div", { style: backgroundStyle(focus, fullWidth), children: _jsx("input", { style: { ...inputStyle, ...style }, ...props, onFocus: onFocus, onBlur: onBlur }) }));
};
