import React from "react";
import SimpleWordCloud from "../SimpleWordCloud";

export const UserSegmentSection = ({ label, title, onClick, segment }) => (
    <div
        className="annotation-title"
        onClick={() => {
            onClick(segment);
        }}
        title={title}
    >
        {label || "\u00A0" /* \u00A0 == &nbsp */}
    </div>
);

export const ContentSegmentSection = ({ title }) => <div>{title}</div>;

export const ASRSentenceSection = ({ title, opacity, onClick }) => (
    <div title={title} style={{ opacity }} onClick={onClick} />
);

export const ASRWordCloudSection = ({ size, words, onClick }) => (
    <SimpleWordCloud size={size} words={words} onClick={onClick} />
);