import { useEffect, useState } from 'react';
import { useI18n } from '@pega/cosmos-react-core';
import Popover from './Popover';
import { mockQuery } from './mockData';
const ItemConfig = ({ itemId, target, onCancel, onSubmit }) => {
    const [item, setItem] = useState(null);
    const [loading, setLoading] = useState(true);
    const t = useI18n();
    useEffect(() => {
        (async () => {
            const [ci] = await mockQuery({ id: itemId, delay: 500 });
            setItem(ci);
            setLoading(false);
        })();
    }, []);
    return (<Popover loading={loading} target={target} heading={!loading && item ? item.label : t('loading')} onCancel={onCancel} onSubmit={onSubmit}>
      <div style={{ margin: 'auto' }}>Configuration for {item?.label}...</div>
    </Popover>);
};
export default ItemConfig;
//# sourceMappingURL=ItemConfig.jsx.map