interface Props {
    type: string;
    firstId: string;
    lastId: string;
    prompt: string;
}

const previewLabel = (text: string) => {
    return <>
        &quot;{text !== undefined ? text.replaceAll('\\n', ' ').split(' ').slice(0, 15).join(' ') : ""}...&quot;
    </>
}

const label = (type: string, firstId: string, lastId: string) => {
    return `${type} #${firstId} ${firstId === lastId ? '' : `- #${lastId}`}`;
}


const ExerciseLabel: React.FC<Props> = ({type, firstId, lastId, prompt}) => {
    return (
        <div className="flex w-full justify-between items-center mr-4">
            <span className="font-semibold ellipsis-2">{label(type, firstId, lastId)}</span>
            <div className="text-sm font-light italic ellipsis-2">{previewLabel(prompt)}</div>
        </div>
    );
}

export default ExerciseLabel;