import React from 'react';
import { useNodeProp } from './shared';
import { HtmlCodeField } from './HtmlCodeField';

/**
 * The HTML block's entire style panel.
 *
 * Deliberately ONLY the code editor. `HtmlBlock.toHtml()` emits nothing but
 * the purified `code`, so every colour/padding/alignment control the generic
 * editor used to offer here was dead on the published page. Styling an HTML
 * block is done inside the user's own markup.
 */
export const HtmlStylePanel: React.FC<{ selectedId: string; nodeProps: Record<string, any> }> = ({
  selectedId,
  nodeProps,
}) => {
  const { setProp: setPropValue } = useNodeProp(selectedId);
  return (
    <>
      <HtmlCodeField
        value={typeof nodeProps.code === 'string' ? nodeProps.code : ''}
        onChange={(v) => setPropValue('code', v)}
      />
      <p style={{ fontSize: 10, color: 'var(--color-text-dim)', lineHeight: 1.4, padding: '0 2px' }}>
        Style this block inside your own markup — a wrapper set here would show
        in the editor but not on the published page.
      </p>
      <p style={{ fontSize: 10, color: 'var(--color-text-dim)', lineHeight: 1.4, padding: '0 2px' }}>
        <strong>Use this block with care.</strong> It renders your markup as-is
        on the published site. Scripts and event handlers are stripped
        automatically, but anything that survives — forms, iframes, images —
        can still send data to wherever it points. Only paste code you
        understand or trust.
      </p>
    </>
  );
};
