import { Divider, type MarkdownSource } from '@cherrystudio/ui'
import { Languages } from 'lucide-react'
import type { FC } from 'react'
import { Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { BeatLoader } from 'react-spinners'

import ChatMarkdown from '../markdown/ChatMarkdown'

interface Props {
  block: MarkdownSource & { content: string }
}

const MessageTranslate: FC<Props> = ({ block }) => {
  const { t } = useTranslation()

  // Render Markdown unconditionally so it mounts at content="" the moment
  // the overlay seed lands. The smooth-stream pipeline inside Markdown then
  // typewrites every delta from chunk 1 onward — gating Markdown behind
  // `!block.content` skipped the typewriter for the first chunk because
  // `useState(block.content)` captured the chunk-1 text as its initial
  // state (no `addChunk` ever ran for it). BeatLoader stays as a
  // co-existing indicator until the first delta arrives.
  const isAwaitingFirstChunk = !block.content || block.content === t('translate.processing')

  return (
    <Fragment>
      <div className="relative mb-2.5">
        <Divider />
        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 bg-background px-2">
          <Languages size={14} className="text-foreground-secondary" />
        </div>
      </div>
      {isAwaitingFirstChunk && (
        <div className="-mt-1.25 mb-1.25 flex h-8 flex-row items-center">
          <BeatLoader color="var(--color-foreground)" size={8} speedMultiplier={0.8} />
        </div>
      )}
      <ChatMarkdown block={block} />
    </Fragment>
  )
}

export default MessageTranslate
