type TranscriptLine = {
  id: number
  ts: string
  text: string
  isFinal: boolean
}

type Props = {
  transcriptLines: TranscriptLine[]
}

export default function TranscriptPanel({ transcriptLines }: Props) {
  return (
    <div className="panel transcript-panel">
      <div className="panel-title">대화/STT</div>
      <div className="transcript-content">
        {transcriptLines.length === 0 && (
          <div className="placeholder">대화를 시작하면 STT 로그가 표시됩니다.</div>
        )}
        {transcriptLines.map((line) => (
          <div
            key={line.id}
            className={`transcript-line ${line.isFinal ? '' : 'live'}`.trim()}
          >
            <span className="transcript-time">-</span>
            <span className="transcript-text">{line.text}</span>
          </div>
        ))}
      </div>
    </div>
  )
}
