import { mergeProps } from 'solid-js';
import { GeneralObserver } from '../general-observer';
export const CodePen = (props) => {
    const props_ = mergeProps({
        height: 500,
        tabs: 'result',
        clickToLoad: false,
        editable: false,
        theme: 'default',
    }, props);
    return (<GeneralObserver height={props_.height}>
      <iframe title={`codepen-${props_.codePenId}`} class="codepen" height={props_.height} style={{
            width: '100%',
        }} src={`//codepen.io/team/codepen/embed${props_.clickToLoad ? '/preview' : ''}/${props_.codePenId}?height=265&theme-id=${props_.theme}&default-tab=${props_.tabs.toString()}${props_.editable ? '&editable=true' : ''}`} allowfullscreen/>
    </GeneralObserver>);
};