import React from 'react';

export interface MessageProps {
  text: string;
  isOwn?: boolean;
  timestamp?: string;
  status?: 'sent' | 'delivered' | 'read';
}

export const Message: React.FC<MessageProps> = ({
  text,
  isOwn = false,
  timestamp,
  status = 'sent'
}) => {
  return (
    <div className={`flex ${isOwn ? 'justify-end' : 'justify-start'} mb-4`}>
      <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${
        isOwn 
          ? 'bg-maya-primary text-white rounded-br-none' 
          : 'bg-maya-accent text-gray-800 rounded-bl-none'
      }`}>
        <p className="text-sm">{text}</p>
        <div className={`flex items-center justify-end space-x-1 mt-1 ${
          isOwn ? 'text-red-100' : 'text-gray-500'
        }`}>
          <span className="text-xs">{timestamp}</span>
          {isOwn && (
            <span className="text-xs">
              {status === 'read' ? '✓✓' : status === 'delivered' ? '✓✓' : '✓'}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};

export default Message