import { memo } from 'react'
import { cn } from '@/utils/cn'
import { MarkdownContent } from '../../../task-panel/Preview/MarkdownPreview'

interface InteractionWrapperProps {
  content?: string
  isLatest?: boolean
  className?: string
  children: React.ReactNode
}

export const InteractionWrapper = memo(
  ({ content, children, className }: InteractionWrapperProps) => {
    const trimmedContent = content?.trim()

    return (
      <div className={cn('mt-2 w-full', className)}>
        <div className="relative rounded-r-lg border border-solid border-border/60 bg-card/90 py-2 pl-4 pr-3">
          {/* 左侧主色竖条 */}
          <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-l-lg" />

          {trimmedContent && (
            <div className="mb-2">
              <MarkdownContent content={trimmedContent} />
            </div>
          )}

          {children}
        </div>
      </div>
    )
  },
)