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

interface UserMessageProps {
  message: Message
  config: ChatConfig
}

const UserMessage: React.FC<UserMessageProps> = ({ 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' })
  }

  const getBubbleStyle = () => {
    const baseStyle: React.CSSProperties = {}
    
    if (config.primaryColor) {
      baseStyle.backgroundColor = config.primaryColor
    }
    
    return baseStyle
  }

  return (
    <div className="lfc-flex lfc-justify-end lfc-mb-6">
      <div className="lfc-max-w-xs sm:lfc-max-w-sm">
        <div
          className="lfc-bg-primary-500 lfc-text-white lfc-rounded-lg lfc-px-3 lfc-py-2 lfc-break-words lfc-text-sm"
          style={getBubbleStyle()}
        >
          <div className="ai-cs-message-content">{message.content}</div>
        </div>
        
        <div className="lfc-text-xs lfc-text-text-tertiary lfc-mt-1 lfc-text-right">
          {formatTime(message.timestamp)}
        </div>
      </div>
    </div>
  )
}

export default UserMessage