import { memo } from 'react';

import type { ScriptBlock } from '../teleprompter.types';

interface ScriptBlockProps {
  block: ScriptBlock;
  registerRef: (element: HTMLElement | null) => void;
}

export default memo(ScriptBlockView);

function ScriptBlockView({ block, registerRef }: ScriptBlockProps) {
  return (
    <section className='teleprompter__block' ref={registerRef} data-loaded={block.isLoaded || undefined}>
      {block.groupTitle && <div className='teleprompter__group'>{block.groupTitle}</div>}
      {block.heading && <h2 className='teleprompter__heading'>{block.heading}</h2>}
      {/* the script is user data, it is rendered as text and never as markup */}
      <p className='teleprompter__body' data-prompter-body>
        {block.text}
      </p>
    </section>
  );
}