'use client';

import Image from 'next/image';
import { ConversationItem } from './ConversationItem';

interface Conversation {
  id: string;
  name: string;
  avatar: string;
  lastMessage: string;
  date: string;
  isOnline?: boolean;
}

interface ConversationListProps {
  conversations: Conversation[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}

export function ConversationList({
  conversations,
  selectedId,
  onSelect,
}: ConversationListProps) {
  return (
    <div className="border border-[#00293d]/10 rounded-[15px] bg-white h-full flex flex-col">
      {/* Scrollable conversation list */}
      <div className="flex-1 overflow-y-auto p-2 space-y-2">
        {conversations.map((conversation) => (
          <ConversationItem
            key={conversation.id}
            {...conversation}
            isSelected={selectedId === conversation.id}
            onClick={() => onSelect(conversation.id)}
          />
        ))}
      </div>
    </div>
  );
}
