import React from 'react'
import { Message, ChatConfig } from '@/types'
import Avatar from './Avatar'

interface AIMessageProps {
  message: Message
  config: ChatConfig
}

const AIMessage: React.FC<AIMessageProps> = ({ message, config }) => {
  const formatTime = (timestamp: Date) => {
    // Ensure timestamp is a valid Date object
    const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
    if (isNaN(date.getTime())) {
      return '--:--'
    }
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  }

  return (
    <div className="lfc-flex lfc-justify-start lfc-mb-6">
      <div className="lfc-max-w-xs sm:lfc-max-w-sm">
        <div className="lfc-flex lfc-mb-1">
          <Avatar
            avatarUrl={config.avatarUrl}
            primaryColor={config.primaryColor}
            className="lfc-w-[38px] lfc-h-[38px] lfc-mr-2"
          />
          <div className="lfc-bg-bg-layer lfc-text-text-primary lfc-rounded-lg lfc-px-3 lfc-py-2 lfc-break-words lfc-text-sm lfc-flex-1 lfc-border lfc-border-border-subtle box-border">
            <div className="ai-cs-message-content fs-sm">{message.content}</div>
          </div>
        </div>



        <div className="lfc-text-xs lfc-text-text-tertiary lfc-mt-1 lfc-text-left">
          {formatTime(message.timestamp)}
        </div>
      </div>
    </div>
  )
}

export default AIMessage