'use client' import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' export type IPreviewItemProps = { type: string index: number content?: string qa?: { answer: string question: string } } export enum PreviewType { TEXT = 'text', QA = 'QA', } const sharpIcon = ( ) const textIcon = ( ) const PreviewItem: FC = ({ type = PreviewType.TEXT, index, content, qa, }) => { const { t } = useTranslation() const charNums = type === PreviewType.TEXT ? (content || '').length : (qa?.answer || '').length + (qa?.question || '').length const formattedIndex = (() => String(index).padStart(3, '0'))() return ( {sharpIcon} {formattedIndex} {textIcon} {charNums} {t('datasetCreation.stepTwo.characters')} {type === PreviewType.TEXT && ( {content} )} {type === PreviewType.QA && ( Q {qa?.question} A {qa?.answer} )} ) } export default React.memo(PreviewItem)