import * as stylex from '@stylexjs/stylex';

import type { FormParagraphField } from './types';

import { sanitizeRichText } from '~/src/lib/utils/sanitizeRichText';

const styles = stylex.create({
  span: {
    gridColumn: 'span 12',
  },
});

/**
 * A static rich-text block (no input, no submitted value). `label` holds the
 * creator-authored HTML from the RichTextEditor.
 */
export const FormParagraph = ({ label }: FormParagraphField) => {
  if (!label) {
    return null;
  }

  return (
    <div
      {...stylex.props(styles.span)}
      dangerouslySetInnerHTML={{ __html: sanitizeRichText(label) }}
    />
  );
};