src/scrollingTranscript/components/SectionItem.tsx

import React from 'react';
import { Section } from '../../types/Conversation';

interface SectionItemProps {
  section: Section;
  position: 'before' | 'active' | 'after';
  displayProp: string;
}

const SectionItem: React.FC<SectionItemProps> = ({ section, position, displayProp }) => {
  return (
    <div className={`section-item ${position}`}>
      <div className="section-content">
        <p className="section-sentence">{section[displayProp]}</p>
      </div>
    </div>
  );
};

export default SectionItem;