import Avatar from '../common/Avatar';

/**
 * Individual Chat Message component
 *
 * @param {object} message - Message object with { id, content, username, avatar, createdAt, userId/user_id }
 * @param {boolean} isOwn - Whether this message belongs to the current user
 * @param {function} formatTime - Optional custom time formatter (default: toLocaleTimeString)
 */
const ChatMessage = ({ message, isOwn, formatTime }) => {
  const defaultFormatTime = (timestamp) => {
    return new Date(timestamp).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const timeFormatter = formatTime || defaultFormatTime;

  return (
    <div className={`flex ${isOwn ? 'justify-end' : 'justify-start'}`}>
      <div
        className={`flex items-start space-x-2 max-w-md ${
          isOwn ? 'flex-row-reverse space-x-reverse' : ''
        }`}
      >
        <Avatar
          src={message.avatar}
          username={message.username}
          size={32}
          title={message.username}
        />
        <div>
          <div className="flex items-baseline space-x-2 mb-1">
            <span className="text-sm font-medium text-gray-900">
              {message.username}
            </span>
            <span className="text-xs text-gray-500">
              {timeFormatter(message.createdAt)}
            </span>
          </div>
          <div
            className={`rounded-lg px-4 py-2 ${
              isOwn
                ? 'bg-primary-600 text-white'
                : 'bg-gray-100 text-gray-900'
            }`}
          >
            {message.content}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatMessage;