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

interface SystemMessageProps {
  message: Message
}

const SystemMessage: React.FC<SystemMessageProps> = ({ message }) => {
  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-center lfc-mb-6">
      <div className="lfc-max-w-xs sm:lfc-max-w-sm">
        <div className="lfc-bg-state-info-bg lfc-text-state-info-text lfc-border lfc-border-state-info-border lfc-rounded-lg lfc-px-3 lfc-py-2 lfc-text-center lfc-text-xs">
          {message.content}
        </div>
        
        <div className="lfc-text-xs lfc-text-text-tertiary lfc-mt-1">
          {formatTime(message.timestamp)}
        </div>
      </div>
    </div>
  )
}

export default SystemMessage