import React from 'react';
import { Message } from '../types';
import { formatDistanceToNow } from '../utils';

interface ChatMessageProps {
  message: Message;
  isOwnMessage: boolean;
}

export function ChatMessage({ message, isOwnMessage }: ChatMessageProps) {
  return (
    <div className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'} mb-4`}>
      <div
        className={`max-w-[70%] rounded-lg px-4 py-2 ${
          isOwnMessage
            ? 'bg-blue-500 text-white rounded-br-none'
            : 'bg-gray-200 text-gray-800 rounded-bl-none'
        }`}
      >
        <div className="flex items-center gap-2">
          <span className="font-medium text-sm">
            {isOwnMessage ? 'You' : message.sender}
          </span>
          <span className="text-xs opacity-75">
            {formatDistanceToNow(message.timestamp)}
          </span>
        </div>
        <p className="mt-1">{message.text}</p>
      </div>
    </div>
  );
}