import type { ApiMessageEntry } from '@/lib/backend-api';

// Shared bubble-list renderer for any message thread — used by the plain
// messaging inbox thread view and by both buyer/vendor lead detail pages,
// since a lead's detail view is just this same thread embedded (§12.2).
export function MessageThread({
  messages,
  currentAccountId,
}: {
  messages: ApiMessageEntry[];
  currentAccountId: number;
}) {
  return (
    <div className="max-h-[28rem] space-y-3 overflow-y-auto">
      {messages.length === 0 && <p className="text-sm text-navy-500">No messages yet.</p>}
      {messages.map((m) => {
        const mine = m.sender_id === currentAccountId;
        return (
          <div key={m.message_id} className={`flex ${mine ? 'justify-end' : 'justify-start'}`}>
            <div
              className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
                mine ? 'bg-navy-800 text-white' : 'border border-navy-100 bg-beige text-navy-800'
              }`}
            >
              <p>{m.message}</p>
              {typeof m.created_at === 'string' && (
                <p className={`mt-1 text-[10px] ${mine ? 'text-navy-200' : 'text-navy-400'}`}>
                  {new Date(m.created_at).toLocaleString()}
                </p>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}