src/components/chat/message.tsx

import { Message as MessageType } from '@/lib/types';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';

interface MessageProps {
  message: MessageType;
  isSender: boolean;
}

export function Message({ message, isSender }: MessageProps) {
  return (
    <div
      className={cn(
        'flex items-start gap-3',
        isSender ? 'flex-row-reverse' : 'flex-row'
      )}
    >
      <Avatar className="h-8 w-8 border">
        <AvatarImage src={message.sender.avatar} alt={message.sender.name} />
        <AvatarFallback>
          {message.sender.name.charAt(0)}
        </AvatarFallback>
      </Avatar>
      <div
        className={cn(
          'max-w-xs rounded-lg p-3 text-sm shadow-sm md:max-w-md',
          isSender
            ? 'rounded-br-none bg-primary text-primary-foreground'
            : 'rounded-bl-none bg-muted',
          message.theme === 'travel' && 'theme-travel',
          message.theme === 'relationships' && 'theme-relationships',
          message.theme === 'recipes' && 'theme-recipes',
          message.theme === 'weather' && 'theme-weather',
        )}
      >
        <p className="leading-relaxed">{message.text}</p>
        <p
          className={cn(
            'mt-1 text-right text-xs',
            isSender ? 'text-primary-foreground/70' : 'text-muted-foreground',
             (message.theme === 'travel' || message.theme === 'relationships') && 'text-white/70',
            (message.theme === 'recipes' || message.theme === 'weather') && 'text-gray-600'
          )}
        >
          {message.timestamp}
        </p>
      </div>
    </div>
  );
}